响应式布局

概念

响应式网站是一个设计理念,它是弹性网格布局、弹性图片、媒体查询等多项技术的综合体,并非说响应式布局就是弹性布局、自适应布局.

优点

1、减少工作量

网站、设计、代码、内容都只需要一份,仅增加脚本、CSS样式工作量.

2、节省时间

3、每个设备都能得到正确的设计

4、搜索优化

缺点

1、会加载更多的脚本和资源;

2、设计比较难精确定位和控制;

3、老版本浏览器兼容不好.

浏览器内核

IE—trident

Firefox—gecko

Safari—webkit

Chrome—blink

Opera—blink,presto(旧版)

JavaScript执行引擎

Chrome—V8

IE—Chakra

Firefox—SpiderMonkey

Safari—JavascriptCore

媒体查询

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

viewport：理想视口(等于可视视口的宽度，用户不需缩放比例即可很好的呈现内容,viewport分为：理想视口，布局视口,可视视口)

width=device-width:宽度等于当前设备的宽度

initial-scale=1：初始的缩放比例（默认为1）

maximum-scale=1：允许用户缩放到得最大比例（默认为1）

user-scalable=no：用户不能手动缩放

@media screen and (max-width:720px) and (min-width:320px){
    body{
       ...
    }
}

screen:设备类型为浏览器

print:打印机