美文网首页
媒体查询适配

媒体查询适配

作者: zZ_d205 | 来源:发表于2020-07-20 17:11 被阅读0次

* {

  margin: 0;

  padding: 0;

  list-style: none;

  font-family: HelveticaNeue-CondensedBol;

}

ul {

  list-style: none;

}

a {

  text-decoration: none;

}

i {

  font-style: normal;

}

body {

  font-size: 12px;

  font-family: PingFangSC-Medium;

}

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

  html {

    font-size: 32px;

  }

}

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

  html {

    font-size: 42.66667px;

  }

}

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

  html {

    font-size: 48px;

  }

}

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

  html {

    font-size: 50px;

  }

}

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

  html {

    font-size: 51.2px;

  }

}

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

  html {

    font-size: 54.8px;

  }

}

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

  html {

    font-size: 55.2px;

  }

}

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

  html {

    font-size: 56.53333px;

  }

}

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

  html {

    font-size: 64px;

  }

}

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

  html {

    font-size: 72px;

  }

}

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

  html {

    font-size: 85.33333px;

  }

}

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

  html {

    font-size: 96px;

  }

}

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

  html {

    font-size: 100px;

  }

}

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

  html {

    font-size: 50px;

  }

}

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

  html {

    font-size: 50px;

  }

}

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

  html {

    font-size: 50px;

  }

}

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

  html {

    font-size: 50px;

  }

}

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

  html {

    font-size: 50px;

  }

}

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

  html {

    font-size: 50px;

  }

}

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

  html {

    font-size: 50px;

  }

}

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

  html {

    font-size: 50px;

  }

}

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

  html {

    font-size: 50px;

  }

}

相关文章

  • 媒体查询适配

    * { margin: 0; padding: 0; list-style: none; font-fam...

  • 媒体查询适配

    公司移动端适配

  • 媒体查询

    媒体查询是CSS3添加的新功能。在移动端适配开发中发挥着强大的作用。接下介绍一下媒体查询的用法。 使用 媒体查询有...

  • 适配及响应式

    1.三种方法 rem、百分比、媒体查询(rem布局一般用于移动端适配;百分比+媒体查询用于移动端适配和PC响应式都...

  • 移动端适配之rem

    现在的移动设备种类繁多,导致需要针对不同的尺寸进行适配。可以使用媒体查询的方式,但是媒体查询的方式因为有跨度,与d...

  • 电商项目笔记(3)---移动端适配

    步骤1:移动端适配 移动端适配无非就是以下3点: 百分比布局; rem尺寸计算; 媒体查询; 步骤2:rem.js...

  • 移动端适配方案

    说到适配移动端,首先想到的是媒体查询,但得写多个@media查询块,我们可以通过动态设置根元素的font-size...

  • 媒体查询 移动端适配

    移动端加上 width=device-width :表示宽度是设备屏幕的宽度initial-scale=1.0:表...

  • 移动端h5之rem布局/px2rem

    rem布局之媒体匹配 最早的时候用的rem适配方法,通过手动设置媒体查询对不同设备进行设置font-size 当然...

  • 常见的移动端适配方案

    常见的移动端适配方案 media queries 媒体查询 flex 布局 rem 根字体大小(html标签的字体...

网友评论

      本文标题:媒体查询适配

      本文链接:https://www.haomeiwen.com/subject/sluykktx.html