js学习总结----响应式布局基础

搭建H5页面的时候，我们需要在HEAD中添加一个META标签(WB中输入meta:vp按下TAB键自动生成)

<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>

viewport:视口

　　width=device-width  设置视口的宽度等于设备的宽度，如果不设置的话，默认视口的宽度是980px ->通俗的理解:我们这个操作其实就是告诉当前的浏览器按照多少宽度来渲染页面，换句话说就是展示当前这个页面的区域一共有多宽（浏览器的宽度）

　　user-scalable = no  禁止用户手动缩放

　　initial-scale = 1.0 定义缩放比例

　　maximum-scale = 1.0

　　minimum-scale = 1.0

高清屏

　　苹果手机是2倍高清屏幕的，也就是我们在手机上看到的那张100*100图片，其实苹果手机是按照200*200的尺寸给我们进行渲染的，这样的话，如果我们真实图片本身才100*100，最后呈现出来的就是被拉伸后变模糊的效果。

　　苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以

　　DPI适配思想:

　　我们在做页面的时候，最好每一张素材图片都准备两套或者三套，比如:

　　logo.png  100*100

　　logo@2x.png 200*200

　　logo@3x.png 300*300

　　媒体查询:@media

　　->媒体设备: all所有设备  screen 所有屏幕设备PC+移动端   print打印机设备...

　　->媒体条件:指定在什么样的条件下执行对应的样式

　　@media all and (max-width:320px){}

　　@media all and (min-width:320px) and (max-width:359px){}

　　@media all and (-webkit-device-pixel-ratio:2) 可以通过这样设置2倍高清屏的样式

响应式布局的解决方案:

　　1）、流式布局法

　　->容器或者盒子的宽度一般都不写固定的值，而是使用百分比(相对于视口区域的百分比)