响应式网页开发注意事项

2021-05-24 分类：网站建设

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说：

一．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处，个人认为不太准确）。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。

本文名称：响应式网页开发注意事项
文章转载：/news16/114816.html

成都网站建设公司_创新互联，为您提供移动网站建设、网站维护、网站营销、网站改版、网站策划、定制开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容