移动web开发rem适配布局(rem+Less+媒体查询)

YinJie…

已于 2022-03-25 11:01:06 修改

阅读量1.2k

点赞数 4

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

于 2022-03-24 16:48:26 首次发布

本文链接：https://blog.csdn.net/qq_49900295/article/details/123701825

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

移动端基础

meta视口标签

我们在移动端开发时都要加上这句话：

<meta name="viewport" content="width=device-width,user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

在这里插入图片描述

物理像素&物理像素比

注意：我们开发适合的1px不是一定等于1个物理像素的，在pc端页面，1个px等于1个物理像素的，但是移动端就不尽相同，1个px的开发像素在移动端可能等于3个物理像素或者2个，1.5个等等，视不同手机而定

移动端多倍图做法

如果一张50px * 50px 的图片在手机打开，按照刚才的物理像素比会放大倍数，这样就会造成图片模糊
我们采取多倍图的做法防止图片模糊
在物理像素比是2的情况下，如果我们采取的是放一个100px * 100px的图片，然后手动把这个图片缩小为50px*50px(css像素),这样它放大两倍就还是我们原来的100 * 100，所以图片就不会模糊了，像这样我们准备的图片比实际需要的大小大n倍，这种方法就是多倍图

移动端css初始化

移动端css初始化推荐使用normalize.css/
normalize.css地址：链接: link.
https://gitee.com/xiaoqiang001/pinyougoujingtaiyemian/blob/master/normalize.css

移动端特殊样式

在这里插入图片描述

rem 单位

在rem适配布局之前页面布局的文字不能随屏幕大小的变化而变化，在屏幕发生变化时元素宽度和高度也不能等比例缩放，是定死的。
用rem适配布局就能很好解决这些

rem (root em)是一个相对单位，类似于em , em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素 ( html ）设置font-size=12px;,非根元素设置width:2rem;则换成px表示就是24px。

rem适配布局原理

如果子盒子都用rem单位，那么在不同大小屏幕下，我们只需要改变html元素的字体大小就能改变页面中元素的大小，进而实现整体控制。

媒体查询

什么是媒体查询

1.使用@media查询，可以针对不同的媒体类型定义不同的样式
2.@media可以针对不同的屏幕尺寸设置不同的样式
3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
4.目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法规范

在这里插入图片描述

注意

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

mediatype 查询类型

将不同的终端设备划分为不同的类型，称为媒体查询
在这里插入图片描述

关键字

关键字（and not only）将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

媒体特性

在这里插入图片描述
主要要加小括号包含

@media screen and (max-width:800px) { /*max-width小于等于800*/
    body {
            background-color:red;
         }
 }

这段代码的意思就是在我们屏幕上并且屏幕宽度不超过800像素时body背景颜色为红色

这就验证了媒体查询的价值：
学到这我们就明白了，媒体查询就是为了根据不同的屏幕尺寸来设置不同的样式

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

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

案例

实现效果：
请添加图片描述
代码示例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding:0;
            }
             @media screen and (min-width:320px)
             {
                 html {
                     font-size: 50px;
                 }
             }
             @media screen and (min-width:640px)
             {
                 html {
                     font-size: 100px;
                 }
             }
             .top {
                 height: 1rem;
                 line-height: 1rem;
                 text-align: center;
                 font-size: .5rem;
                 background-color: green;
                 color: #fff;
             }
        </style>
</head>
<body>
    <div class="top">购物车</div>
</body>
</html>

引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets(样式表)。原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

语法规范

在这里插入图片描述

案例

案例介绍：我们有两个div盒子，当屏幕大于等于640px以上时，我们让div一行显示，当屏幕小于640px时，让div分行显示

实现效果：
请添加图片描述
代码示例：
html部分：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="first.css" media="screen and (min-width:320px)">
        <link rel="stylesheet" href="second.css" media="screen and (min-width:640px">
</head>
<body>
    <div>1</div>
    <div>2</div>
</body>
</html>

first.css:

div {
    width: 100px;
    height: 100px;
}
div:nth-child(1) {
    background-color: pink;
}
div:nth-child(2) {
    background-color: purple;
}

second.css就是在div样式里加了一句左浮动

Less基础

什么是Less

Less ( Leaner Style Sheets 的缩写）是一门CSS扩展语言，也成为CSS预处理器。
做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS的语法基础之上，引入了变量，Mixin (混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

链接: link Less中文网址:https://lesscss.com.cn/

常见的CSS预处理器: Sass、Less、Stylus

一句话：Less 是一门css预处理语言，它扩展了css的动态特性

Less变量

语法规范：

在这里插入图片描述

变量命名规范：

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

Less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

我们在vscode里安装easyLESS插件，当我们写完less将它保存就会有同名的css文件在文件夹中，我们直接引入css文件就行

Less应用案例

3.less:

@color : pink; /*声明变量*/
.first,
.second {
    width: 100px;
    height: 100px;
    background-color: @color;
}

html文件：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="3.css">
</head>
<body>
    <div class="first">11</div>
    <div class="second">22</div>
</body>
</html>

因为我们安装了easyLESS插件这样直接引入3.css就可以

实现效果：
在这里插入图片描述

Less嵌套

Less的嵌套会让你觉得它真的太棒了，先给个例子
我们html的结构是这样的：
在这里插入图片描述
我们在less里可以这样设置样式：

这种嵌套写法是不是一目了然啊

如果遇见（交集|伪类|伪元素选择器)
内层选择器的前面没有&符号，则它被解析为父选择器的后代;
如果有&符号，它就被解析为父元素自身或父元素的伪类。

css写法：
在这里插入图片描述

Less嵌套写法：
在这里插入图片描述

也就是说如果我们想给son加个伪类选择器只需要在嵌套的前面加个&符号就行

在这里插入图片描述
这样当我们鼠标移动到子盒子时字体就会变为蓝色

Less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/ )算术运算。
在这里插入图片描述
在Less里这样的写法是正确的
父盒子的宽度就是180px，高度就是400px

在这里插入图片描述
注意：
1.乘号(*)和除号(/)的写法
2.运算符中间左右有个空格隔开
3.对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
4.如果两个值之间只有一个值有单位，则运算结果就取该单位

rem适配方案

1.首先我们选一套标准尺寸 750为准
2.我们用屏幕尺寸除以我们划分的份数，就得到了html里面的文字大小，但是不同屏幕下得到的文字大小是不一样的
3.页面元素的rem值 = 页面元素在750像素下的px值 / html里面的文字大小

YinJie…

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
移动web开发rem适配布局(rem+Less+媒体查询)

文章目录移动端基础meta视口标签物理像素&物理像素比移动端多倍图做法移动端css初始化移动端特殊样式rem 单位rem适配布局原理媒体查询什么是媒体查询语法规范注意mediatype 查询类型关键字媒体特性媒体查询+rem实现元素动态大小变化案例引入资源语法规范案例Less基础什么是LessLess变量语法规范：变量命名规范：Less编译移动端基础meta视口标签我们在移动端开发时都要加上这句话：<meta name="viewport" content="width=device-
复制链接

扫一扫