html5 css3自适应,网页自适应过程详解-HTML5+CSS3

1、之前写：

2、字体大小不变，建议使用px，这点与网上的教程不同；

3、宽度设置：如果之前的是900px，那修改成：width:100%;max-width: 900px;

因为设置padding:15px，会出现横向滚动条，解决方法是：

在上级CSS中添加width:100%;max-width: 900px，需要用到padding的css只需要添加max-width: 900px，或者不添加。

注意：

对应的是#x，不继承上级css

对应的是.x，继承上级css

4、图片设置：img{max-width: 100%;height: auto;width: auto\9;margin:5px 0;}

5、本站的导航和底部都有背景图片，做完以上自适应设置后，在手机端这些图片的宽度不是全部显示。

解决方法是在css中加入：

#menu{

background: url(menubg.jpg) no-repeat 0 0;

background-size:100%100%; /*这段是关键，规定背景图像的尺寸*/

width:100%;

max-width: 950px;

}

点击复制微信：9981996

---

本页面导航文字错误：字是竖排的，在#menu ul加上：position: relative;

即恢复正常

相关阅读：