页面设计笔记

JasonZhang 发布于2019-08-01 16:16 / 2106人阅读

摘要：和一部分安卓设备的屏幕尺寸为英寸厘米，物理像素为大约是。对开发者来说，手机在竖直状态下的宽度就是，开发者就可以根据这个尺寸来设计网页，但是还要考虑手机在水平状态时的页面效果，以及和安卓平板上的页面效果。

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

head区域的要点 浏览器渲染模式X-UA-Compatible

这一句是指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通常是比页面要宽的，这样才能保证整个页面都显示在移动端浏览器中。在移动端浏览器里面，用户缩放查看页面时，页面整体布局是不变的。

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

上面这一行中，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？官网上总结了以下几点：

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

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

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

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

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

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

IE兼容性相关

To be continued...

GPU云服务器云服务器设计模式学习笔记高级程序设计-笔记 head-first设计模式笔记页面设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50402.html

页面设计笔记

摘要：和一部分安卓设备的屏幕尺寸为英寸厘米，物理像素为大约是。对开发者来说，手机在竖直状态下的宽度就是，开发者就可以根据这个尺寸来设计网页，但是还要考虑手机在水平状态时的页面效果，以及和安卓平板上的页面效果。最近两周写了几个页面，虽然看起来很简单，但是也考虑到了IE8的兼容性、不同屏幕尺寸的适配性以及其它的一些方面，所以也算是小有收获。下面就把写代码过程中遇到的各种问题和解决方案记录下来。...

wh469012917 2019-08-30 15:52 评论0 收藏0
CSS学习笔记(十四) 我们前端是怎么跟设计师沟通的

摘要：前端期望中的设计能给予的除了之外，还有设计上游岗位传递下来的东西。份文件一份好的文件是分层清晰，设计规范的文件。有些页面设计师没有考虑到。地址如下原文链接我们前端是怎么跟设计师沟通的豪情博客园 1.交付一般设计师给前端的只有psd，没有其它多余的东西，连基本的文档都懒得给。前端期望中的设计能给予的除了psd之外，还有设计上游岗位传递下来的东西。比如：产品原型，需求文档，交...

NusterCache 2019-08-28 18:06 评论0 收藏0
JavaScript高级程序设计学习笔记二（在HTML中使用JavaScript）

摘要：在中使用在中使用脚本有两种方式一种是嵌入在中的脚本，另一种是引入外部的脚本。二者并行执行，不会造成阻塞。字符编码，较少使用。放置的位置将脚本放在标签前是最佳的。小结把插入到页面中要使用元素。延迟脚本总是按照指定它们的顺序执行。在 HTML 中使用 JavaScript 在html中使用JavaScript脚本有两种方式一种是嵌入在HTML中的脚本，另一种是引入外部的脚本。两种方式都离...

Jason_Geng 2019-08-22 11:18 评论0 收藏0
《javascript高级程序设计》笔记：script元素属性

摘要：高级程序设计摘录可选。表示通过属性指定的代码的字符集。这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为。规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于事件执行。《javascript高级程序设计》摘录： async:可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部...

since1986 2019-08-20 18:34 评论0 收藏0
002-读书笔记-JavaScript高级程序设计在HTML中使用JavaScript

摘要：文件内部使用使用到的代码引入外部文件外部代码的地址标签的位置一般情况下，标签的位置放在标签中引入代码页面结构对于需要引入很多的中间，如果把放在头部，无疑会导致浏览器呈现页面出现延迟，就是导致页面出现空白。页面结构引入代码这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第二章。 1.使用方式在HTML中使用 JavaScript 的方式有两种，第一种就是直接内...

banana_pi 2019-08-22 11:13 评论0 收藏0