移动端布局——rem布局

最新推荐文章于 2023-06-21 17:59:20 发布

Wyyyy1024

最新推荐文章于 2023-06-21 17:59:20 发布

阅读量342

点赞数 1

分类专栏：前端移动与开发

本文链接：https://blog.csdn.net/weixin_44389562/article/details/108424289

版权

前端移动与开发专栏收录该内容

22 篇文章 6 订阅

订阅专栏

rem适配布局

rem基础

rem单位

rem(root em)是一个相对单位类似em，em是相对于父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小
rem的优点就是可以通过修改html中的字体大小来修改页面中元素的大小可以控制整体。

媒体查询

media Query是CSS3新特性
使用@media查询可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式

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

注意：

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

1. mediatype 查询类型

- 将不同的终端设备划分成不同的类型，称为媒体类型  （理解为设备类型，非屏幕，屏幕）
- all 所有设备
- print 用于打印设备
- screen 用于电脑屏幕，智能手机等。

2. 关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

3.媒体特性
每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格
我们暂且了解三个：（注意他们要加小括号包含）

width 定义输出设备中页面的可见区域的宽度
max-width 定义输出设备中页面的最大可见区域的宽度
min-width 定义输出设备中页面的最小可见区域的宽度

 <style>
        /* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
        /* max-width 小于等于800 */
        /* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
        
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }
       /* 总结：媒体查询， 检测媒体（手机，电脑），的特征变化*/
        
        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
    </style>
</head>

<body>

</body>

媒体查询+rem案例

效果：屏幕大小变化时，购物车的字体，以及所在盒子的高度也在变化：

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* html {
            font-size: 100px;
        } */
        /* 从小到大的顺序 */
        
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            /* 高度，字体大小，都设置为rem单位，即可根据html的font-size的改变而改变*/
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="top">购物车</div>
</body>

总结：

rem+媒体查询，实现屏幕大小改变，界面元素跟着一起改变的原理，实现顺序：
媒体查询作用，根据屏幕尺寸的范围，来切换html的font-size （界面元素的参照物跟着屏幕改变）
界面元素的大小都以rem为单位（rem代表参照物html的font-size）

媒体查询引入资源

当界面大小变化时，整个界面的结构有较大的变化时，我们会使用媒体查询引入资源。
针对不同大小的界面，准备不同的css样式文件，当界面大小变化时，直接改变引入的css样式文件，这就是媒体查询引入资源。

<style>
        /* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 */
        /* 当我们屏幕小于640 我们让div一行显示一个 */
        /* 一个建议： 我们媒体查询最好的方法是从小到大 */
        /* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
    </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>

less 基础

Less 介绍

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
Less中文网址：http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus
一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。

Less安装

①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/

②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可

③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可

npm：node package manager，node包管理工具

less是作为node中的一个工具包存在的，所以通过npm安装

④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

Less使用

Less 使用之变量

变量是指没有固定的值，可以改变的。
理解：变化的量，变化的内容，变化的值。
语法：
@变量名:值;
如：
@color: pink;

注意：

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

 // 定义一个粉色的变量
    @color: pink;  
    // 错误的变量名  @1color   @color~@#
    // 变量名区分大小写  @color  和  @Color 是两个不同的变量
    // 定义了一个 字体为14像素的变量
    @font14: 14px;
    body {
        background-color: @color;
    }
    div {
        color: @color;
        font-size: @font14;
    }
    a {
        font-size: @font14;
    }

总结：

定义了一个粉色的变量，body和div都使用了这个变量。那么我们如果想要将body和div的颜色一起修改为另一个颜色，只需要修改变量的值即可，简单方便
一般将使用次数比较多的内容，定义为变量，然后通过使用变量，来使用到变量的值

Less 嵌套

less嵌套写法如下：

   /*我们经常用到选择器的嵌套 (选择器组合使用：后代选择器)*/
   #header .logo {
     width: 300px;
   }
   /* less中的选择器嵌套写法 */
   #header {
       .logo {
          width: 300px;
       }
   }
   ````
   

如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接

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



### Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

 

```css
 /*Less 里面写*/
   @witdh: 10px + 5;
   div {
       border: @witdh solid red;
   }
   /*生成的css*/
   div {
     border: 15px solid red;
   }
   /*Less 甚至还可以这样 */
   width: (@width + 5) * 2;
```
   

- 乘号（*）和除号（/）的写法  
- 运算符中间左右有个空格隔开 1px + 5
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位 
- 如果两个值之间只有一个值有单位，则运算结果就取该单位

Wyyyy1024

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端布局——rem布局

rem适配布局rem基础rem单位rem(root em)是一个相对单位类似em，em是相对于父元素字体大小。不同的是rem的基准是相对于html元素的字体大小rem的优点就是可以通过修改html中的字体大小来修改页面中元素的大小可以控制整体。媒体查询media Query是CSS3新特性使用@media查询可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式@media mediatype and|not|only (media feature)
复制链接

扫一扫

专栏目录