关于rem布局和适配

最新推荐文章于 2024-04-09 16:54:45 发布

yyy_wj

最新推荐文章于 2024-04-09 16:54:45 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/yyy_wj/article/details/103109579

版权

之前项目中遇到的一些布局

1.伸缩布局 flex
2.流式布局百分比
3.响应布局媒体查询（超小屏设备的时候：流式布局）

共同点：元素只能做宽度的适配，高度不能适配（排除图片）
更好的适配方案rem：宽度和高度都能做到适配（等比缩放）

rem布局

通过控制html上的字体大小去控制页面上所有已rem为单位的基准值控制尺寸

4.1 把页面上px单位转换成rem单位
4.2 页面制作的时候 psd （设计稿）上的量取的px转成rem使用
4.3 怎么换算？？？预设一个基准值方便计算 100px
4.4 适配的时候设置基准值 320px 50px 怎么算：（640px 100px ===320px 50px）
4.5 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度
4.6 怎么去改变（js换算，影响页面加载速度，所以媒体查询推荐）动态获取当前设备宽度，然后换算单位，把设置好的基准值放进去

rem+less适配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        /*假设的设备  320px 414px 640px */
        @media (min-width: 320px) {
            html{
                font-size: 50px;
            }
        }
        @media (min-width: 414px) {
            html{
                font-size: 64.6875px;
            }
        }
        @media (min-width: 640px) {
            html{
                font-size: 100px;
            }
        }
        body{
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        /*流式容器*/
        header{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.32rem;
            text-align: center;
            background: green;
            color: #fff;
        }
    </style>
</head>
<body>
<header>购物车</header>
</body>
</html>

这样的方式不太好进行维护，为了更好的维护，适配更多主流设备，可以采用less+rem的适配方案。

1、定义变量 var.less

Less可以定义数组（适配设备的集合）

@charset "UTF-8";
//变量
//rem适配方案不好维护  设备会更新  设计稿尺寸  预设基准值
//适配主流设备十几种
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdWidth:750px;
//预设基准值
@baseFontSize:100px;
//设备的种类 length内置函数
@len:length(@adapterDeviceList);
//主体颜色
@snColor:#fabc09;

2、混入（函数）misxins.less

遍历使用的是for循环
less没有循环语法
使用函数的迭代会死循环
根据数组的长度去停止当前循环
给函数的执行附加条件 when less的判断语法
需要序号来判断通过序号遍历 @index 1 开始
遍历成功

extract（需要提取的数组，通过序号进行提取）：从数组中提取


.adapterMixin(@index) when ( @index > 0){
  @media (min-width: extract(@adapterDeviceList,@index)){
    html{
      font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
    }
  }
  .adapterMixin( @index - 1);
}

3、调用 adapter.less

.adapterMixin(@len);

4、引入这些less文件 index.less

//变量
@import "var";
//混入
@import "mixins";
//适配
@import "adapter";

这样就可以比较方便做到移动端各种主流设备的适配了。

yyy_wj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫