響應式網站筆記

1.頁面檢測
device.js

2.js控制style
document.documentElement.clientWidth 窗口寬度兼容ie6
onload 加載完成
onresize 調整尺寸
onscroll 滾動滾輪

3.視口
iphone中屏幕寬度是980
iphone分辨率1136*640 三星note3分辨率1920*1080 可是視口都是980
分辨率和視口沒有關係

約束視口,content包含5個規則
<meta content="width=device-width, //命令視口的寬度，變爲設備的寬(1024*768爲標準,一般爲320~380之間)
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no" //不容許用戶縮放
name="viewport" id="viewport">

css3媒體查詢(ie9開始支持)
<link rel="stylesheet" href="style1.css" type="text/css" media="(min-width:640px) and (max-width:750px)">

min-width max-width box-sizing:border-box
jqmobile適合開發功能較多的網站