响应式网站笔记

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适合开发功能较多的网站