视口:浏览器窗口内的内容区域,不包含工具栏,标签栏。网页实际显示.
屏幕尺寸:设备物理显示区域
各种宽度和高度
a、可视区的真实宽度和高度
document.documentElement.clientWidth
document.documentElement.clientHeight
都去掉滚动条的大小(一般是17像素),比如我的dell笔记本在chrome下,
正常的可视区(即无滚动条)大小是1366*663,假如水平和垂直方向都有滚动条的话,这两个值
的大小为 1349 * 646
b、
document.documentElement.offsetWidth 无滚动条 1366 有滚动条 1349 同a
document.documentElement.offsetHeight 根据实际的html元素被撑开的大小
c、
window.innerWidth / window.innerHeight
(1)有滚动条 document.documentElement.clientWidth + 滚动条宽度
(2)无滚动条 等于document.documentElement.clientWidth
高度计算规则同宽度
响应式方法论
- 先针对小视口设计
- 然后逐步对大视口渐进增强
- 响应式设计中内容始终优先
- 流动布局、弹性图片和媒体查询:使用百分比布局创建流动的弹性界面,同时使用媒体查询来限制元素的变动范围。(平滑过渡)
HTML5的时代
- 简化标签
- 语义化标签
- CSS3(圆角,渐变…..)
-webkit-,-moz-是各厂商发布正式版本之前,实验各自对css3新特性的实现
业务需求和预算的考虑
- 客户是否想支持互联网用户增长最迅猛的市场?如果想,那响应式方法就很适合。
- 客户是否想要最简洁、快速,且易于维护的代码?如果想,那响应式方法就很适合。
- 客户能否理解用户体验可以且本应该根据浏览器不同而不同?如果可以理解,那响应式方法就很适合。
- 客户是否要求设计效果在所有浏览器中都保持一致,包括IE 8 以及更低版本?如果是,响应式设计就不适合。
- 该网站的当前或预期客户中,是否有百分之七十以上的人可能使用Internet Explorer 8或者更低版本?如果是,则响应式设计不适合。
- 在预算允许的情况下,一个完全定制的“移动”版网站比响应式设计更适合。
网站不必在所有浏览器中表现一致
客户->思维定式->说服引导(理由如下)
- 允许页面显示效果在老旧浏览器中有细微的差别,这样可以使代码更易维护,将来更新的成本也更低。
- 让页面元素在那些老旧浏览器(如Internet Explorer 8 及更低版本)中表现一致会导致网站增加大量的图片。这会使网站变慢,制作成本变高,而且更难维护。
- 现代浏览器可以理解的简洁代码等同于更快速的网站。快速响应的网站在搜索引擎中的评级高于慢腾腾的网站。
- 使用老旧浏览器的用户越来越少,使用现代浏览器的用户越来越多——我们应该支持大多数!
媒体查询
W3C规范审核:工作草案(Working Draft)->候选推荐标准(Candidate Recommendation)->提议推荐标准(Proposed
Recommendation)->几年时间等待->W3C 推荐标准(REC)
- CSS3 是由很多附加模块组合而成的。媒体查询就是其中的一个模块。
- 媒体查询可以让我们根据设备显示器的特性为其设定CSS 样式。
媒体查询语法
CSS 样式表中使用媒体查询
在屏幕宽度小于等于400 像素的设备上,h1 元素的文字颜色就会变成绿色。
@media screen and (max-device-width: 400px) {
h1 { color: green }
}
给视口最大宽度为360 像素的显示屏设备加载一个名为phone.css 的样式表。
@import url("phone.css") screen and (max-width:360px);
使用CSS 的@import 方式会增加HTTP 请求(这会影响加载速度)
通过标签的media 属性为样式表指定设备类型(如显示屏或打印机)。
非纵向放置的显示屏设备
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portraitscreen.
css" />
媒体查询列表:查询列表中的任意一个查询为真,则加载文件。
全部查询都不为真,则不加载。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:
800px), projection" href="800wide-portrait-screen.css" />
媒体主要特性
- width:视口宽度。
- height:视口高度。
- device-width:渲染表面的宽度(对我们来说,就是设备屏幕的宽度)。
- device-height:渲染表面的高度(对我们来说,就是设备屏幕的高度)。
- orientation:检查设备处于横向还是纵向。
- aspect-ratio:基于视口宽度和高度的宽高比。一个16∶9 比例的显示屏可以这样定义aspect-ratio: 16/9。
- device-aspect-ratio:和aspect-ratio 类似,基于设备渲染平面宽度和高度的宽高比。
- color:每种颜色的位数。例如min-color: 16 会检测设备是否拥有16 位颜色。
- color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
- monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数,如monochrome: 2。
- resolution:用来检测屏幕或打印机的分辨率,如min-resolution: 300dpi。还可以接受每厘米像素点数的度量值,如min-resolution: 118dpcm。
- scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描)。如720p HD 电视(720p 的p 即表明是逐行扫描)匹配scan: progressive,而1080i HD 电视(1080i 中的i 表明是隔行扫描)匹配scan: interlace。
- grid:用来检测输出设备是网格设备还是位图设备。
- 除scan 和grid 之外,都可使用min 和max 前缀来创建一个查询范围。
建议:
- Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
- CSS重置样式:normalize.css
保证图片尽可能精简(base64)
时刻谨记,我们要保证代码和数据都尽可能精简,以便为带宽有限的用户提供愉悦的体验。
阻止移动浏览器自动调整页面大小
- iOS 和Android 浏览器都基于核心
最常用写法
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
width:可视区域的宽度,值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级