vw+rem移动端适配

发布时间:2020-06-20 03:17:59 作者:沉迷学习中
来源:网络 阅读:6563


html {

   font-size: 16px;

}

@media screen and (min-width: 320px) {

html {

       /* iPhone5的320px尺寸作为14px基准,320px正好14px大小, 375 16px */

       font-size: calc(100% +  (100vw - 320px) / 27.5);

       font-size: calc(14px +  (100vw - 320px) / 27.5);

   }

}

@media screen and (min-width: 375px) {

html {

       /* iPhone6的375px尺寸作为16px基准,414px正好18px大小, 600 20px */

       font-size: calc(100% + 2 * (100vw - 375px) / 39);

       font-size: calc(16px + 2 * (100vw - 375px) / 39);

   }

}

@media screen and (min-width: 414px) {

html {

       /* 414px-1000px每100像素宽字体增加1px(18px-22px) */

       font-size: calc(112.5% + 4 * (100vw - 414px) / 586);

       font-size: calc(18px + 4 * (100vw - 414px) / 586);

   }

}

@media screen and (min-width: 600px) {

html {

       /* 600px-1000px每100像素宽字体增加1px(20px-24px) */

       font-size: calc(125% + 4 * (100vw - 600px) / 400);

       font-size: calc(20px + 4 * (100vw - 600px) / 400);

   }

}

@media screen and (min-width: 1000px) {

html {

       /* 1000px往后是每100像素0.5px增加 */

       font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);

       font-size: calc(22px + 6 * (100vw - 1000px) / 1000);

   }

}


推荐阅读:
  1. h5的移动端适配如何实现
  2. css移动端适配的方法有几种

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

vw rem 适配

上一篇:xtrabackup介绍及备份原理

下一篇:C/C++回调函数

相关阅读

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

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