响应式网页开发注意事项
2016-10-18 20:02
387 查看
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说：
[b]一．CSS代码不能指定像素宽度：[/b]
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 {
4000
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处，个人认为不太准确）。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。
具体说：
[b]一．CSS代码不能指定像素宽度：[/b]
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 {
4000
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处，个人认为不太准确）。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 响应式网页开发注意事项
- 响应式网页图片库设计的九个注意事项
- 微信公众号开发之网页中及时获取当前用户Openid及注意事项
- ASP开发网页牢记注意事项
- 微信开发网页授权OAuth2.0注意事项
- 网页设计、web前端、后台的开发流程和注意事项
- ASP开发网页牢记注意事项
- ASP开发网页牢记注意事项
- 响应式开发(四)-----Bootstrap CSS----------Bootstrap CSS概览和相关注意事项
- 用ASP开发网页需要牢记的注意事项
- 网页设计、web前端、后台的开发流程和注意事项
- 用ASP开发网页需要牢记的注意事项
- 响应式开发(四)-----Bootstrap CSS----------Bootstrap CSS概览和相关注意事项
- 网页开发时的注意事项（关于编码问题）
- ASP开发网页时需要牢记的注意事项列表
- Eclipse+WTP+Tomcat开发的几点注意事项
- 嵌入系统开发注意事项
- Windows NT 驱动程序开发人员提示 -- 应注意避免的事项
- WEB开发中代码自动格式化注意事项
- BREW 开发的注意事项：