响应式网页开发注意事项

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

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

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

广告

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

猜你还喜欢下面的内容

小程序开发

网站建设知识

分类信息网站