响应式布局之rem适配布局方案

四夕一九

已于 2022-09-05 14:45:32 修改

阅读量2.9k

点赞数 3

文章标签：前端 css3

于 2022-06-25 16:23:42 首次发布

本文链接：https://blog.csdn.net/HanyStill/article/details/125455993

版权

本文介绍了两种响应式布局的适配方案：rem + 媒体查询 + Less技术，以及flexible.js。通过rem单位结合媒体查询实现元素动态大小变化，Less技术简化CSS编写。另外，flexible.js提供了一种简洁高效的移动端适配方法，避免媒体查询，通过设置html字体大小实现等比缩放。

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

rem适配布局有两种方案，一种是rem + 媒体查询 + Less技术，一种是使用 flexible.js。

方案1: rem + 媒体查询 + Less技术

方案技术简介

rem 单位

rem( root em )是一个相对单位，类似 em，em 的基准是相对于父元素的字体大小，rem 的基准是相对于根元素( html )的字体大小。
rem 的优点是可以通过修改 html 的 font-size 来改变页面元素的大小，可以实现整体控制。

媒体查询

媒体查询( Media Query )是CSS3新语法，可以针对不同的屏幕尺寸、媒体类型设置不同的样式，重置浏览器大小的过程中，会根据浏览器的宽高重新渲染，目前很多苹果手机、安卓手机、平板等设备都用得到多媒体查询。
语法：

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

常见的 mediatype：all(所有设备) ，print(打印机和打印预览)，screen(电脑屏幕/平板电脑/智能手机)
and 连接，not 排除，only 特指，not 和 only 都可省略
常见的 media feature：width / min-width / max-width，定义输出设备中页面(最大/最小)可见区域的宽度
媒体查询一般按照从大到小或者从小到大的顺序来，从小到大写会更简洁
max-width 和 min-width 都是包含等于的

案例：媒体查询+rem实现元素动态大小变化

设置 html 的 font-size，div 的 font-size / height 单位为 rem，实现的效果：不同的屏幕宽度，会有不同的字体大小 / 块高度

<style>
    @media screen and (min-width:320px) {
   
        html{
   
            font-size: 50px;
        }
    }
    @media screen and (min-width:640px) {
   
        html{
   
            font-size: 100px;
        }
    }
    .top{
   
        height: 1rem;
        font-size: .5rem;
        background-color: green;
        color: white;
        text-align: center;
        line-height: 1rem;
    }
</style>
<body>
    <div class="top">购物车</div>
</body>

媒体查询引入资源

当样式比较繁多的时候，可以针对不同的媒体使用不同的样式表( stylesheets )，原理就是直接在 link 中判断屏幕的尺寸，调用不同的 css 文件。
例如，屏幕尺寸 >=640px，div 一行显示两个，320px <=屏幕尺寸< 640px，div 一行显示一个，就这样引入样式表：

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">