网页如何做到响应式?

1、网页头部,添加viewport标签

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
2、块级元素不使用绝对宽度,使用百分比
width:XX%;
3、字体大小使用rem
font-size:1.4rem;
4、流动布局
.left{ width:30%; float:left}
.right{ width:70%; float:right;}
5、选择加载CSS
href="style/css/css600.css" />上面的代码意思是,如果屏幕宽度小于600像素(max-device-width: 600px),就加载css600.css文件。
6、CSS的@media规则(媒体查询)
@media screen and (max-device-width: 400px) { .left{ float:none;} }
7、图片的自适应
img {width: 100%;}

打赏

关闭

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少
支付宝
微信

打开支付宝扫一扫,即可进行扫码打赏哦