rem布局

最新推荐文章于 2022-10-18 16:42:02 发布

是木木呀22

最新推荐文章于 2022-10-18 16:42:02 发布

阅读量459

点赞数

分类专栏：前端文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_45899362/article/details/123296760

版权

本文介绍了rem布局及其优势，讲解了媒体查询的使用，通过Less基础概念，包括变量、嵌套和运算，阐述了Less如何简化CSS编写。同时，详细探讨了两种rem适配方案，包括基于Less的媒体查询方法和使用flexible.js的方法，以实现移动端页面的自适应布局。

摘要由CSDN通过智能技术生成

1.rem单位

rem类似于em

em是相对于父元素的字体大小来说的相对单位
rem是相对于html元素字体大小来说的，也可以作为宽高的单位
优点：可以通过修改html里面的文字大小来整体控制整个页面的文字大小

2.媒体查询（Media Query）

可以针对于不同的屏幕尺寸设置不同的样式
对于不同媒体和不同浏览器大小，页面也会根据浏览器的宽度和高度重新渲染页面

基本语法：

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

用@media 开头注意@符号
mediatype 媒体类型取值如下
将不同的终端设备划分为不同类型
关键字 and not only
将媒体类型或多个媒体特性连接在一起作为媒体查询的条件
media feature 媒体特性必须有小括号包含

demo：根据屏幕不同宽度改变页面颜色

<!-- 媒体查询：根据页面不同尺寸改变不同样式 -->
<style>
    /* 注意min-width，max-width都是包含等于的，所以要错开写 */
    @media screen and (min-width:981px){
    
        body{
    
            background-color: aqua;
        }
    }
    /* 多个媒体特性的写法 */
    @media screen and