您的位置：首页 > 其它

响应式网页开发注意事项

2018-03-03 10:44 316 查看

一．CSS代码不能指定像素宽度： width:xxx px; 只能指定百分比宽度： width: xx%; 或者：width:auto; 这里开发是指一个网页不仅能用在pc上，也能同时用于移动端，但是对于webapp这种还是需要单独做一个webapp使用的页面。 二. 相对大小的字体 字体也不能使用绝对大小（px），而只能使用相对大小（em）。　　body {　　　　font: normal 100%Helvetica, Arial, sans-serif;　　}上面的代码指定，字体大小是页面默认大小的100%，即16像素。　　h1 {　　　　font-size: 1.5em;　　}然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。　　small {　　　　font-size: 0.875em;　　}small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。 三. 流动布局（fluid grid）"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。　　.main {　　　　float: right;　　　　width: 70%;　　}　　.leftBar {　　　　float: left;　　　　width: 25%;　　}float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。另外，绝对定位（position:absolute）的使用，也要非常小心。 四. 图片的自适应（fluid image）除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。这只要一行CSS代码：　　img { max-width:100%;}这行代码对于大多数嵌入网页的视频也有效，所以可以写成：　　img, object {max-width: 100%;}老版本的IE不支持max-width，所以只好写成：　　img { width: 100%; } 五． iPhone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。 由于Android系统可以更改状态栏和导航栏的高度，这里可以取默认值为48px和100px（这些尺寸网上均可查）。那么就会把网页内容往下挤，进入盲区（根据不同的布局方式可能挤出视口，即可视区域之下，）。取这两个系统者的最大值为148（48+100）,如下图5，设计稿要尽量保证单页下面没有重要内容。那么在所有屏幕大小上把重要内容显示完全，就要注意市面上存在的小尺寸手机屏幕，现在绝大部分智能手机分辨率都在640x960px（iPhone4分辨率）之上，所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812（960-148=812）。在此总结，一般情况下，以现有市场上流行的移动智能手机，单页翻转（非延伸向下的长页面）设计稿尺寸为640×1136，在高度为812处设置一条安全线（参考线），将重要的内容布局在这条安全线之上。一般情况下，H5页面设计稿做成640x1136px是最为稳妥的尺寸，在812px高度处增加一条安全线，重要内容在此线之上（网上有些文章说安全线是960px处，个人认为不太准确）。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航