css自适应布局

发布时间:2020-05-06 07:25:36 作者:袁max
来源:网络 阅读:456

自适应是一个繁琐的问题,解决的方案也有很多,今天我推荐一个融合各种自适应的优点的方法。

/*高度的自适应*/
html{font-size: 100px;}
@media screen and (max-width: 330px){html{font-size: 85px;}}
@media screen and (min-width: 331px) and (max-width: 400px){html{font-size: 100px;}}
@media screen and (min-width: 401px){html{font-size: 110px;}}

*{margin: 0px; padding: 0px;list-style: none;font-family: "微软雅黑";}
body,ul,li,p,span,em,i,a{ font-family: inherit; font-size: 14px;}

/*字体的自适应*/
body.font_13,ul.font_13,li.font_13,p.font_13,span.font_13,em.font_13,i.font_13,a.font_13{font-size: 13px;}
body.font_15,ul.font_15,li.font_15,p.font_15,span.font_15,em.font_15,i.font_15,a.font_15{font-size: 15px;}
body.font_16,ul.font_16,li.font_16,p.font_16,span.font_16,em.font_16,i.font_16,a.font_16{font-size: 16px;}
body.font_18,ul.font_18,li.font_18,p.font_18,span.font_18,em.font_18,i.font_18,a.font_18{font-size: 18px;}
body.font_20,ul.font_20,li.font_20,p.font_20,span.font_20,em.font_20,i.font_20,a.font_20{font-size: 20px;}
body.font_22,ul.font_22,li.font_22,p.font_22,span.font_22,em.font_22,i.font_22,a.font_22{font-size: 22px;}
body.font_24,ul.font_24,li.font_24,p.font_24,span.font_24,em.font_24,i.font_24,a.font_24{font-size: 22px;}

@media screen and (max-width: 400px){
body,ul,li,p{ font-family: inherit; font-size: 3.7333vw;}
body.font_13,ul.font_13,li.font_13,p.font_13,span.font_13,em.font_13,i.font_13,a.font_13{font-size: 3.46666vw;}    
body.font_15,ul.font_15,li.font_15,p.font_15,span.font_15,em.font_15,i.font_15,a.font_15{font-size: 4vw;}
body.font_16,ul.font_16,li.font_16,p.font_16,span.font_16,em.font_16,i.font_16,a.font_16{font-size: 4.2666vw;}
body.font_18,ul.font_18,li.font_18,p.font_18,span.font_18,em.font_18,i.font_18,a.font_18{font-size: 4.8vw;}
body.font_20,ul.font_20,li.font_20,p.font_20,span.font_20,em.font_20,i.font_20,a.font_20{font-size: 5.333vw;}
body.font_22,ul.font_22,li.font_22,p.font_22,span.font_22,em.font_22,i.font_22,a.font_22{font-size:5.8666vw;}
body.font_24,ul.font_24,li.font_24,p.font_24,span.font_24,em.font_24,i.font_24,a.font_24{font-size: 6.4vw;}
}

这段代码解决了自适应的两个问题:
1、高度自适应
2、字体自适应

先来说高度自适应:给html元素设定了一个font-size,为什么这么做,因为有一个单位叫做rem,就是
以html的font-size为单位,如果它的值为100px,那么1rem=100px,根据显示器的宽度,运用@media查询
语句,就能动态改变rem为单位的高度的改变。

再来说字体适应,有一个单位叫做vw,它的意思是当前屏幕的显示宽/100,比如现在的显示器是375px的宽,
那么1vw=375/100,他会跟着屏幕自动放大放小。
但是有一个问题就是,横屏的时候,字体会过大。
所以也运用了@media查询语句,在屏幕过大的时候,就换成px为单位的字体。
而且把不同字号的字体做成一个class,以后维护起来也会很方便。

用法就是这样

<p class="font_18"  >hello world!</p>
推荐阅读:
  1. 自适应布局
  2. CSS实现自适应布局的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css 布局 自适应

上一篇:float浮动

下一篇:Go36-1-命令行工具

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》