首先清楚两个概念
响应式:根据不同屏幕分辨率,加载不同的样式。一般样式重写
自适应:根据不同的屏幕分辨率,缩放大小,不影响布局。一般采用百分比写
运用 Css3 Media Queries,根据不同的屏幕分辨率,选择应用不同的Css规则:
max-width:若浏览区域的宽度小于400像素,则下方的CSS描述就会立即被套用:
@media screen and (max-width:400px){
.class {
background:#ccc;
}
}
也可以把要套用的描述独立成外部档案:
<link rel="stylesheet" media="screen and (max-width: 400px)" href="mini.css" />
Device Width:若浏览设备的可视范围最大为480px,则下方的CSS描述就会立即被套用:(注:移动手机目前常见最大宽度为480px,如iPhone or Android Phone):
@media screen and (max-device-width:480px){
.class
{
background:#000;
}
}
针对iPad的Portrait Mode(直立)与Landscape Mode(横躺)两种浏览模式给予不同的css设定档:
- <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
- <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
@media all and (min-width: 1200px){ /*大分辨率*/
}
@media all and (min-width: 850px) and (max-width: 1199px){ /*中分辨率 pc小|| pad*/
}
@media all and (min-width: 700px) and (max-width: 849px){ /*pad*/
}
@media all and (min-width: 480px) and (max-width: 699px){ /*高分辨率手机 || 低分辨率平板*/
}
@media all and (max-width: 479px){ /*手机设备*/
}
需求要适应几个什么样的设备 就写几套适应的样式
<link rel="stylesheet" type="text/css" media="screen and (min-width:992px)" href="1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:767px) and (max-width:992px)" href="2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:767px)" href="3.css"> <!--宽度大小承接上下级-->
@media all and (max-width:1024px){ .class{} } iPadPro 最大宽度自己写(推荐写法可控性高,可操作程度高)
all 所有媒体
screen 手持设备彩色(tv 电视)
and 关键字 并且
not 关键字 除了
only 关键字 只有
例子:@media all and (max-device-width:768px){}
all就行了 只要满足媒体特性就行不管什么设备