rem及适配布局

最新推荐文章于 2024-09-30 20:20:23 发布

情不知所起1

最新推荐文章于 2024-09-30 20:20:23 发布

阅读量92

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43871100/article/details/127947464

版权

rem适配布局

本文针对rem及less对不同屏幕的适配基础知识的讲解

rem

rem基础知识

rem（root em）单位（相对），基准是相对于html元素的字体大小，em是父元素字体大小；
优点：可以通过修改html的文字大小来改变页面中元素的大小进行调制；

<style>
div {
            font-size:5px;
        }
p {
            /*1em相对于父元素的字体大小来说，即为120px*/
            width: 10em;
            height:20em;
            background-color: aquamarine;
        }
  </style>
  <body>
    <div>
        <p></p>
    </div>
</body>

<style>
 html{
            font-size: 14px;
        }
p {
            /*rem相对于html元素字体大小来说，*/
            width: 10rem;
            height:20rem;
            background-color: red;
        }
</style>
<body>
    <div>
        <p></p>
    </div>
</body>

rem

媒体查询（MEDIA QUERY）

不同的屏幕尺寸设置不同的样式

@media mediatype and|not|oly (media feature){
           css-code
}

mediatype 媒体类型

all 所有设备
print 打印机和预览
scree 电脑屏幕，平板电脑，智能手机。
关键字 and not only
media feature 媒体特性
width 定义输出
min-width
max-width

<style>
        /*屏幕上，且当最大宽度为800像素时，背景颜色为*/
        @media screen and (max-width:800px) {
           body{
            background-color: aquamarine;
            }
        }

媒体引入资源
当样式比较多时，针对不同媒体设备引用不同的样式

 </style>
    <link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)" >
    <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)" >
</head>
<body>
    <div>1</div>
    <div>2</div>
</body>

style320.css

div {
    width: 100%;
    height: 100px;
}

div:nth-child(1){
    background-color: rgb(231, 231, 15);
}

div:nth-child(2){
    background-color: aqua;
}

style640.css

div {
    float: left;
    width:50%;
    height: 100px;
}

div:nth-child(1){
    background-color: beige;
}

div:nth-child(2){
    background-color: aqua;
}

640像素
320像素

Less

less pk css
维护css的弊端（css冗余度高，无计算能力），为less的预处理语言。
常见的：SASS,LESS,STYLUS.
Less安装：

下载node软件,网址然后安装,安装过程无其他操作 ,可以更改安装路径;
安装完成后检查是否安装成功,win+r打开cmd输入node -v 如果出现版本号,说明安装成功;
安装less组件,win+r打开cmd 输入npm install -g less等待安装成功;
测试less是否安装成功使用命令lessc -v 出现版本号表示安装成功;

使用
@变量名：值;
注意
不能是包含特殊字符，不能以数字开头，区分大小写

//
@color:pink;
@font14:14px;
body{background-color:@color;}
div{color:@color;
      font-size:@font14;}

Less编译：需要把.less编译成可以使用的.css文件，不能直接运用。
easy less
.less 会生成对应的.css;
Less嵌套
.less嵌套子元素直接写在父元素里面。

.header{
    width:200px;
    height:200px;
    background-color:pink;
    .a{color:red;}
}

生成对应的.css为

.header{
    width:200px;
    height:200px;
    background-color:pink;
}
.header  a{
     color:red;
}

伪类
如果有伪类、交集选择器，前面加&;
例如：

a:hover{
       color:red;
       }

Less套写

a{
  &:hover{
      color:red;
 }
}

Less运算
乘号（）除号（/）
运算符的左右必须加空格；
两个数参与运算，若只有一个数有单位，则最后的结果以该单位为准；
两个数参与运算，若单位不一致，则最后的结果以第一个单位为准；
从左向右运算；

width:(@width + 5) * 2;

rem适配方案
使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小发生变化元素尺寸也发生变化，从而达到等比例缩放的适配。
技术方案1——rem+媒体查询+less
常见：
| 设备 |常见宽度 |
| iPhone4.5 |640px |
| iPhone678| 750px|
| Android |320px、360、375、384、400、414、500、720px |
思路：
假设设计稿为750px，把整个屏幕划分为15等分（也可20,30），每一份作为html字体大小，这里为50px。若在320px的设备上，字体大小为320/15=21.33px，用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的。比如以750为标准设计稿，一个100100的页面原则在750的平明下，就是100/50转换为rem就是2rem2rem，比例为1：1。320屏幕下，html字体大小为21.33，则2rem=42.66px，此时宽和高都是42.66。
元素大小取值方法