媒体查询代码记录

小鱼儿 2023-07-17 15:45 5阅读 0赞

# rem的使用方 #

首先，先说一个常识，浏览器的默认字体高都是16px。

## 兼容性： ##

目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。

就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

## 使用%单位方便使用 ##

css中的body中先全局声明font-size=62.5%，这里的%的算法和rem一样。

因为100%=16px，1px=6.25%，所以10px=62.5%，  
这是的1rem=10px，所以12px=1.2rem。px与rem的转换通过10就可以得来，很方便了吧！

## 使用方法 ##

注意，rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可；

## 下面的媒体查询尺寸基于element-ui ##

// 媒体查询
    @media only screen and (max-width: 768px) { 
      html { 
        font-size: ;
      }
    }
    @media only screen and (min-width: 768px) { 
      html { 
        font-size: ;
      }
    }
    @media only screen and (min-width: 992px) { 
      /* 16*65.2=10px 1rem=10px */ 
      html { 
        font-size: 62.5%;
      }
    }
    @media only screen and (min-width: 1200px) { 
      //1rem=20px html { 
        font-size: 125%;
      }
    }
    @media only screen and (min-width: 1920px) { 
      //1rem=30px html { 
        font-size: 187.5%;
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关媒体查询

记篇 html { font-size: 50px; } // 我们此次定义的划分的份数为 15 @no: 15; ...

深藏阁楼爱情的钟/ 2024年04月19日 11:04/ 0 赞/ 65 阅读

相关媒体查询代码记录

rem的使用方首先，先说一个常识，浏览器的默认字体高都是16px。兼容性：目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本

小鱼儿/ 2023年07月17日 15:45/ 0 赞/ 6 阅读

相关媒体查询

媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成

墨蓝/ 2023年07月13日 05:56/ 0 赞/ 9 阅读

相关媒体查询

1.定义 > 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 > @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计>响

怼烎@/ 2023年07月03日 06:24/ 0 赞/ 23 阅读

相关媒体查询

@media mediatype and|not|only (media feature) { CSS-Code; } 参数说明

￡神魔★判官ぃ/ 2023年01月10日 13:28/ 0 赞/ 153 阅读

相关媒体查询

学习目标：学会根据游览器大小的变化而变化 -------------------- 学习内容：学会媒体查询媒体查询@media ![在这里插入图片

刺骨的言语ヽ痛彻心扉/ 2022年11月06日 03:59/ 0 赞/ 224 阅读

相关 CSS媒体查询

不同设备：用法： @media screen{ } 可选值：all 所有设备；screen 屏幕；print 打印机；speech 屏

小鱼儿/ 2022年09月04日 14:43/ 0 赞/ 310 阅读

相关媒体查询

定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面

我会带着你远行/ 2022年05月09日 04:48/ 0 赞/ 333 阅读

相关 js媒体查询

window.onload = function() { onsize() } window.onresize

r囧r小猫/ 2021年12月08日 16:39/ 0 赞/ 273 阅读

相关 CSS媒体查询

\\\css3媒体查询 css3媒体查询是响应式方案核心 \\\媒体类型 all 所有媒体（默认值） screen 彩色屏幕 print 打印预览

蔚落/ 2021年10月24日 00:32/ 0 赞/ 368 阅读