响应式Web设计

1. 响应式Web设计

采用灵活的、设备无关的方法来为Web进行设计。响应式Web设计使用了与渐进增强相同的思想。包括三个核心元素：媒介查询、流动布局、自适应图片。响应式站点不是PC站，也不是手机站。

 

2. 优雅降级

当你利用所有新的特性时，你要保证那些相对较老的浏览器也能访问你的内容。

 

3. 渐进增强

把优雅降级倒过来。

 

4. 四种布局类型

固定布局：宽度固定

流动布局：宽度是百度比

弹性布局：宽度单位是em

混合布局：使用以上2种及以上方式

 

5. 字体

常用的单位有：像素、em、rem、百分比

em：以父元素大小为基准

rem：以html元素大小为基准

最具响应性的单位：以百分比作为body字体大小的单位，以em作为其它元素的单位

 

6. 图片自适应

不能在img中设width各height属性，只能用css

max-width: 100%;

width: 100%;

 

7. 媒介查询

概念：允许你根据设备的信息（如屏幕宽度、方向、分辩率等 ）来使用不同的样式。 

外部文件样式：<meta rel="stylesheet" href="" media="all">

内联样式：@media type and (expr){

 a{

 }

}

常用的type有：all screen print

常用的expr有：width height orientation resolution

逻辑有：and not only ,(即or)

转载于:https://www.cnblogs.com/weiheli/p/3742722.html