html5自适应网站实例自适应h5页面

HTML5如何利用rem实现自适应布局

1、方法一：所有布局用百分比布局，这种方法是比较传统的。

创新互联专业为企业提供韩城网站建设、韩城做网站、韩城网站设计、韩城网站制作等企业网站建设、网页设计与制作、韩城企业网站模板建站服务，十载韩城做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

2、如果用户的设备是320—360之间就显示成1rem=10px；在360—400之间就显示1rem=125px；在400—480，则显示1rem=15px等等以此类推，如果你想兼容更精确的手机屏幕，可以使用更精确的范围与屏幕。

3、rem布局的兼容性：Mozilla Firefox 6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+、ie6-ie8 还是别用rem 不过现在的手机一般浏览器，一般可以直接不用去管IE内核的浏览器了。

4、说说我知道的方法。其实这个需求应该是实现一侧固定宽度，另一侧自适应宽度，传统的圣杯布局，可以解决这个问题，然而这会导致嵌套太多层。

了解什么是”自适应网页设计”自从2010年，Ethan Marcotte提出了 “自适应网页设计”(Responsive Web Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

通过设置viewport参数使用css3中的缩放两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例，然后进行缩放。但是因为目前手机种类繁多，浏览器种类也很多，所以每种方法各自都有不少的问题。

结论：要做真正的“感应式”设计，自动适应多个屏幕，又不想写代码，就只能用互动大师http：//vxplo点吸烟去做。

代码实例：style type=text/css html { font-size： 42px； } /style 按照设计图的像素进行开发按照正常网页开发流程，进行网页开发即可。

这种网页布局就是“自适应布局”(有人喜欢把“Responsive layout”直译成‘响应式布局’，本人觉得‘自适应布局’更本土化)。

html5中是通过css3的background-size来控制自适应的。

min980px.css文件里要用百分比的方式来布局，这样布局就自适应了，另外字体的大小也要用自适应才行，如大小用em做单位。当布局缩小时，布局也有相应的改变，如隐藏一些不大重要的内容。

分享文章：html5自适应网站实例自适应h5页面
网址分享：http://mswzjz.cn/article/diejjcg.html