摘要:最近两周写了几个页面设计,虽然看起来很简单,但是也考虑到了IE8的兼容性、不同屏幕尺寸的适配性以及其它的一些方面,所以也算是小有收获。下面就把写代码过程中遇到的各种问题和解决方案记录下来。
最近两周写了几个页面设计,虽然看起来很简单,但是也考虑到了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元素的样式进行规范化;
4.
修正浏览器的bug并保证各浏览器的一致性;
5.
通过细微的改进,来提升可用性;
6.
在代码中用注释和详尽的文档加以解释,让开发者知其所以然。
7.
除此之外,normalize.css还支持IE8及更高的版本,和自己的开发需求也是相符的。
希望这篇页面设计文章可以帮助到你。总之,同学们,你想要的职坐标网站设计频道都能找到!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号