页面设计笔记
安安 2017-07-25 来源 :网络 阅读 1137 评论 0

摘要:最近两周写了几个页面设计,虽然看起来很简单,但是也考虑到了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及更高的版本,和自己的开发需求也是相符的。


希望这篇页面设计文章可以帮助到你。总之,同学们,你想要的职坐标网站设计频道都能找到!

本文由 @安安 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程