前端H5移动端响应式介绍

一 响应式布局

1.什么是响应式布局

可以根据不同客户端不同的尺寸,达到适应屏幕功能叫响应式。

一个页面多套样式

二 HTML自带响应式标签（回顾）

1.@media 媒体查询标签

使用方法:
@media 设备 连接符 (条件){ 满足条件的CSS代码 }

例 : @media screen and (max-width: 960px){
   body{
         background: #000;
}
}
Ps：内容间都有空格

2.@media 响应式查询
1)设备常用属性:
all 所有设备
screen 屏幕 “思克润”
print 打印设备
2)连接符:
and 表示与，并且，和，同时 连接多条件
not 表示除了 指设备
only 表示只有 指设备
3)条件值:
max-width 小于
min-width 大于
max-device-width 等于

三 网页中的标准设计:
1.最流行的分辨率是19201080的，在该分辨率下，页面中心区域为1200px以内都可以。建议1190px
2. 1024768下，网页宽度保持在1002以内；建议 990px
3. 800*600下， 网页宽度保持在778以内； 建议 770px

获取可视化窗口的宽度
document.documentElement.clientWidth ||
document.body.clientWidth (推荐)(ps注意:去掉自带样式)

document.bod