响应式布局和移动端网页开发
媒体属性 媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符 注意：媒体属性必须用括号()包起来，否则无效 包含 width | min-width | max-width height | min-height | max-height device-width | min-device-width | max-device-width device-height | min-device-height | max-device-height aspect-ratio | min-aspect-ratio | max-aspect-ratio device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio color | min-color | max-color color-index | min-color-index | max-color-index monochrome | min-monochrome | max-monochrome resolution | min-resolution | max-resolution scan | grid 逻辑操作符 not and or only ， 断点 我们通过媒体查询的形式来进行网页布局，原理就是设置好几个区间范围，当浏览器的宽度符合了条件区间后就执行相应的css代码。 断点的设置即可以根据实际的情况，也可以参照一些框架的设置。 bootstrap框架的断点 < 768px 超小屏幕(一般指手机) >= 768px and <= 992px 小屏幕(一般指平板) >= 992px and <= 1200px 中等屏幕(桌面显示器) >= 1200px 大屏幕(较大的桌面显示器) 弹性布局 移动端网页开发 像素 像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element) 像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。 分类 设备像素 设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的 css像素 CSS像素(CSS pixels): 又称为逻辑像素，是为web开发者创造的，在CSS和javascript中使用的一个抽象的层 视口(viewport) 分类 布局视口 网页在移动端浏览器中渲染出来的区域，用来加载网页内容 可视视口 浏览器的窗口 理想视口 让布局视口等于可视视口，即为理想视口，由乔布斯提出 例如： 布局视口相当于是网页的内容，而移动端的屏幕则相当于可视视口。当我们将布局视口设置为与可视视口相同时，则变成了理想视口。
而所谓的理想视口，就是布局视口在一个设备上的最佳尺寸，理想视口下的页面便于浏览器 浏览 阅读。