响应式布局

1 原因：手机一经出世，很网站还没有来得及制作手机端的网页。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

注：device设备的意思，宽度是980px

 

2 图片的处理

问题：电脑端的图片在移动器端可能很大。

解决：  

max-width: 100%

注:不是width：100%的原因是若宽度很大，图片就失真了

 

3 四种方式

3.1 媒体查询

为什么设置响应式？

方便开发，先是通用的css，后面根据需要量身定做。

?

1 2 3 4 5

@media screen and (min-width:700px) and (max-width:1200px){     body{     background-color: blue;           } }

　注： media是媒体查询，screen是设备的显示器

3.2 rem

rem的原理：将不同的屏幕大小的页面分成同等份。

?

1 2 3

html{   font-size:100px;  //1rem=100px }

 3.3 百分比 与或 vw/vh

vw是相对于浏览器窗口；百分比是相对于父元素或视口

 

4 手机浏览器内核

谷歌，火狐 、IE、微软

兼容的前缀：
1 -ms-
2 -moz-
3 -o-
4 -webkit-