1. @media only screen and (min-width: 1080px), only screen and (min-device-width:1080px) {
  2. html,body {
  3. font-size:168.75px;
  4. }
  5. }
  6. @media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
  7. html,body {
  8. font-size:168.75px;
  9. }
  10. }
  11. @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
  12. html,body {
  13. font-size:150px;
  14. }
  15. }
  16. @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
  17. html,body {
  18. font-size:125px;
  19. }
  20. }
  21. @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
  22. html,body {
  23. font-size:112.5px;
  24. }
  25. }
  26. @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
  27. html,body {
  28. font-size:100px;
  29. }
  30. }
  31. @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
  32. html,body {
  33. font-size:93.75px;
  34. }
  35. }
  36. @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
  37. html,body {
  38. font-size:84.375px;
  39. }
  40. }
  41. @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
  42. html,body {
  43. font-size:75px;
  44. }
  45. }
  46. @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
  47. html,body {
  48. font-size:64.6875px;
  49. }
  50. }
  51. @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
  52. html,body {
  53. font-size:62.5px;
  54. }
  55. }
  56. @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
  57. html,body {
  58. font-size:58.59375px;
  59. }
  60. }
  61. @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
  62. html,body {
  63. font-size:56.25px;
  64. }
  65. }
  66. @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
  67. html,body {
  68. font-size:50px;
  69. }
  70. }
  71. @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
  72. html,body {
  73. font-size:37.5px;
  74. }
  75. }

  

rem媒体查询的更多相关文章

  1. 【译】PX、EM还是REM媒体查询?

    原文链接:https://zellwk.com/blog/media-query-units/ 你有没有想过使用媒体查询的时候到底该用px.em还是rem作单位呢?我曾经也有同样的疑问,而且我到现在也 ...

  2. html --- rem 媒体查询

    rem是一种相对长度单位,参考的基准是<html>标签定义的font-size. viewport 做移动端的h5,通常会在HTML文件中指定一个<meta>标签: <m ...

  3. Web移动前端开发-——rem+less+媒体查询,rem+flexble.js+媒体查询

    实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...

  4. 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲.....

    一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...

  5. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  6. 从设计图到CSS:rem+viewport+媒体查询+Sass

    根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总结一下其中要点. rem rem是一种相对长度单位,参考的基准是<html>标签定义的 ...

  7. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  8. 移动端开发rem布局之less+媒体查询布局的原理步骤和心得

    rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...

  9. rem适配布局(rem+less+媒体查询 和 rem+flexible.js)

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

随机推荐

  1. [51nod1270] 数组的最大代价(简单dp)

    解题关键:先由贪心的思想得出任何一个位置只能取1或者a[i],然后dp即可. #include<bits/stdc++.h> using namespace std; typedef lo ...

  2. SQL标量值函数:返回汉字拼音首拼

    今天遇到一个需求,客户要求在系统客户端选择客户的时候,可以用拼音首拼去快速过滤选择,此时我们在客户表里面加多一个拼音首拼字段CustPY来记录,字段加好了,我们要把所有客户名称的拼音简拼都更新到Cus ...

  3. error C2872: “flann”: 不明确的符号 --- PCL 与OpenCV2 的flann命名空间冲突问题的解决方法

    error C2872: "flann": 不明确的符号 - PCL 与OpenCV2命名空间冲突问题的解决方法 error C2872: "flann" 如果 ...

  4. 大富翁开发日记:一、使用巨型lua协程

    一个大胆的尝试:使用巨型lua协程来表示整个“一局”流程. lua协程是一个很另类的功能,有并发的影子但又不是真的并发,所以真正拿它来做大功能框架的范例不多,通常用于一些小型trick式设计.但这次我 ...

  5. ubuntu判断系统是32位还是64位

    1. 打开终端. 2. 输入命令  sudo uname -m 3. 如果输出为 x86_64, 则说明是64位操作系统:如果输出为 i686,说明是32位操作系统.

  6. Webservice 或者HttpRequest请求的时候提示 “指定的注册表项不存在”错误 解决方案

    今天又遇到神奇的事情,在使用WebService的时候居然提示“指定的注册表不存在.” The specified registry key does not exist. Google后发现,原来是 ...

  7. Linux操作系统的内存使用方法详细解析

    我是一名程序员,那么我在这里以一个程序员的角度来讲解Linux内存的使用. 一提到内存管理,我们头脑中闪出的两个概念,就是虚拟内存,与物理内存.这两个概念主要来自于linux内核的支持. Linux在 ...

  8. DESede/CBC/PKCS5Padding

    Java.security.NoSuchAlgorithmException: Cannot find any provider supporting DESede/CBC/PKCS5Padding ...

  9. SCUT - 337 - 岩殿居蟹 - 线段树 - 树状数组

    https://scut.online/p/337 这个东西是个阶梯状的.那么可以考虑存两棵树,一棵树是阶梯的,另一棵树的平的,随便一减就是需要的阶梯. 优化之后貌似速度比树状数组还惊人. #incl ...

  10. return die exit 常用

    die()停止程序运行,输出内容exit是停止程序运行,不输出内容return是返回值die是遇到错误才停止exit是直接停止,并且不运行后续代码,exit()可以显示内容.return就是纯粹的返回 ...