谷歌响应式适配@media媒体查询-qaq卟言的个人博客

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

viewport是指用户网页的可视区域
参数
width：控制 viewport的大小，可以是指定的一个值，比如1920，或者是特殊的值，如device-width为设备的宽度，单位为缩放为100%时的CSS的像素
height：和 width相对应，指定高度，可以是指定的一个值，比如1080，或者是特殊的值，如device-height为设备的高度
initial-scale：初始缩放比例，即当页面第一次载入是时缩放比例
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放
手机浏览器是把页面放在一个虚拟的viewport中，通常这个虚拟的viewport比屏幕宽，这样就不用把每个网页挤到很小的窗口中
这样会破坏没有针对手机浏览器优化的网页的布局，可以通过平移和缩放来查看网页的不同部分
css媒体查询
IE9+以及所有浏览器都支持@media规则（详细的规则可以去自己搜索看一下，这里我就懒得说了）
使用@media您可以指定一组媒体查询和一个css样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的css样式才会应用于文档
当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
7.png

/*宽度大于780px时*/
@media only screen and (min-width: 780px){
/*css样式内容*/
}
/*宽度小于780px时*/
@media only screen and (max-width: 780px) {
/*css样式内容*/
}

【谷歌响应式适配@media媒体查询】