一、CSS实现响应式布局
1、CSS中的Media Query(媒介查询)是什么?
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。
2、语法结构及用法
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}
例:在link中使用@media:
<link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px),only screen and (max-device-width: 480px)” href=“link.css”/>
上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。
3.内嵌的样式中的写法:
例:@media screen and (min-width:768px)and (max-width:999px){
}
二、px、rem、em的区别
1em=16px(浏览器默认值)针对于body并且会继承。
1rem=16px针对于根元素HTML并且不会继承。