页面设计笔记

最近两周写了几个页面，虽然看起来很简单，但是也考虑到了IE8的兼容性、不同屏幕尺寸的适配性以及其它的一些方面，所以也算是小有收获。下面就把写代码过程中遇到的各种问题和解决方案记录下来。

---

head区域的要点

浏览器渲染模式X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

这一句是指IE系列浏览器以其最高版本运行，而不是兼容模式；同时让安装了Chrome Frame的浏览器开启Chrome Frame的渲染模式。
IE=edge这一句对低于11的IE都有效，IE11则默认开启此选项。如果写成IE=9; IE=8; IE=7这种形式，则各版本IE均以自身版本的模式运行，而不是向下兼容。就实际应用而言，建议还是采用IE=edge这种形式。

参考链接：
Is it still valid to use IE=edge,chrome=1?
“X-UA-Compatible” content=“IE=9; IE=8; IE=7; IE=EDGE”

视口viewport

移动端浏览器为了保证PC端页面能够正常显示，在一个虚拟的“窗口”（viewport）中渲染页面，viewport通常是比页面要宽的，这样才能保证整个页面都显示在移动端浏览器中。在移动端浏览器里面，用户缩放查看页面时，页面整体布局是不变的。

一般来说，为了保证页面能在移动端浏览器里面正常显示，都会加上下面这么一行。

<meta name="viewport" content="width=device-width, initial-scale=1">

上面这一行中，width属性设置视口的宽度等于设备的宽度，按CSS像素来说的话，就是100%的比例。这样设置了之后，页面在宽度这个方向上的所有内容就完整展示在浏览器中了。initial-scale属性设置页面初次加载完成后的缩放级别为1，这个就没什么可说的了。至于是否要加上禁止用户缩放的user-scalable=0，就见仁见智了。

iPhone和一部分安卓设备的屏幕尺寸为3~4英寸（7~10厘米），物理像素为320~480（大约是160dpi）。对web开发者来说，手机在竖直状态下的宽度就是320px，开发者就可以根据这个尺寸来设计网页，但是还要考虑手机在水平状态时的页面效果，以及iPad和安卓平板上的页面效果。

在160dpi下设计的页面，在240dpi的屏幕中，设置了initial-scale=1属性之后，页面会缩放至原始大小的150%。文本自然会更加清晰、锐利，但是位图就可能会变模糊了，那么为了保证在这两种dpi下都有很好的显示效果，就需要按照最终尺寸的150%（或者200%，如果还要考虑retina屏320dpi的苹果设备的话）来设计页面了，并通过CSS或者视口来根据设备实际情况对页面进行合理缩放。

参考链接：
Using the viewport meta tag to control layout on mobile browsers
移动前端开发之viewport的深入理解

Normalize.css

为什么要用normalize.css而不是css reset？官网上总结了以下几点：

1. 保留有用的浏览器默认样式；

2. 将一大批HTML元素的样式进行规范化；

3. 修正浏览器的bug并保证各浏览器的一致性；

4. 通过细微的改进，来提升可用性；

5. 在代码中用注释和详尽的文档加以解释，让开发者知其所以然。

除此之外，normalize.css还支持IE8及更高的版本，和自己的开发需求也是相符的。

IE兼容性相关

To be continued...

---