459~486（rem+媒体查询+Less+苏宁易购移动端首页）

最新推荐文章于 2024-04-10 16:52:25 发布
最新推荐文章于 2024-04-10 16:52:25 发布
阅读量353 收藏 1
点赞数 1
分类专栏： HTML&CSS 文章标签： 媒体 less css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57809042/article/details/127188384
版权

1 rem基础

rem单位

rem(root em)是一个相对单位,类似于em,em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如,根元素(html)设置font-size= 12px;非根元素设置width:2rem;则换成px表示就是24px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 14px;
        }
        div {
            font-size: 12px;
            width: 15rem;
            height: 15rem;
            background-color: purple;
        }
        p {
            /* 1. em相对于父元素的字体来说的 */
            /* width: 10em;
            height: 10em; */
            /* rem 相对于html元素字体大小来说的 */
            width: 10rem;
            height: 10rem;
            background-color: pink;
            /* 3. rem的优势就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

2 媒体查询

2.1 什么是媒体查询

媒体查询(Media Query)是CSS3新语法。

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

2.2 语法规范

@media mediatype and|not|only (median feature) {
    CSS-Code;
}
  • 用@media开头 注意@符号
  • mediatype 媒体类型
  • 关键字andy not only
  • media feature媒体特性必须有小括号包含

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

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

  • and :可以将多个媒体特性连接到一起，相当于“且”的意思。
  • not :排除某个媒体类型,相当于“非”的意思,可以省略。
  • only :指定某个特定的媒体类型,可以省略。
  1. 媒体特性
    每种媒体类型都具有格子不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。暂时了解一下三个，注意他们要加小括号
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</html>
案例：根据页面宽度改变背景颜色
  1. 按照从大到小的或者从小到大的思路
  2. 注意我们有最大值max-width和最小值min-width都是包含等于的
  3. 当屏幕小于540像素，背景颜色变为蓝色(x<=539)
  4. 当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色(540<=x<=969)
  5. 当屏幕大于等于970像素的时候,背景颜色为红色(x>=970)

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 媒体查询一般按照从大到小的或者从小到大的顺序来 */
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
        /* screen还有and必须带上 不能省略  单位px不能省略 */
    </style>
</head>
<body>
    
</body>
</html>

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

rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸

媒体查询可以根据不同设备度来修改样式

媒体查询+rem 就可以实现不同设备宽度,实现页面元素大小的动态变化

案例：媒体查询+rem实现元素变化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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 {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>
<body>
    <div class="top">购物车</div>
</body>
</html>

2.4 引入资源

当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets(样式表)。

原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</html>

style640.css

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

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

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

style320.css

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

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

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

3 Less基础

3.1 维护Css的弊端

CSS是一门非程序式语言,没有变量、函数、SCOPE (作用域)等概念。

  • CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的。
  • 不方便维护及扩展,不利于复用。
  • CSS没有很好的计算能力
  • 非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

3.2 Less介绍

Less(Leaner Style Sheets的缩写)是一门CSS扩展语言,也成为CSS预处理器。

做为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性。

它在CSS的语法基础之上,引入了变量, Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。

Less中文网址: http://lesscss.cn/

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

Less是一门CSS预处理语言，它扩展了CSS的动态特性

Less使用

首先建立一个后缀名为less的文件，在这个less文件里面书写css语句

  • Less变量
  • Less编译
  • Less嵌套
  • Less运算

3.3 Less变量

变量是指没有固定的值,可以改变的。因为CSS中的一些颜色和数值等经常使用。

@变量名:值;

  1. 变量命名规范
  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感

3.4 Less编译

vscode Less插件

Easy LESS插件用来把less文件编译为
css文件

安装完毕插件,重新加载下vscode.
只要保存一下Less文件,会自动生成CSS文件。

3.5 Less嵌套

平时写选择器的嵌套：

#header .logo {
    width: 300px;
}

Less嵌套写法

#header {
    .logo {
        width: 300px;
    }
}

如果遇见(交集|伪类伪元素选择器)

  • 内层选择器的前面没有&符号,则它被解析为父选择器的后代;
  • 如果有&符号,它就被解析为元素自身或父元素的伪类。
    index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
    <link rel="stylesheet" href="nest.css">
</head>
<body>
    <div class="header">
        <a href="#">文字</a>
    </div>
    <div class="nav">
        <div class="logo">yayaya</div>
    </div>
</body>
</html>

nest.less

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 1. less嵌套 子元素的样式直接写到父元素里面
    a {
        color: red;
        // 2. 如果有伪类、交集选择器、伪元素选择器 内层选择器的前面需要加&
        &:hover {
            color: blue;
        }
    }
}
.nav {
    .logo {
        color: green;
    }
    &::before {
        content: "";
    }
}

生成的ness.css

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
}
.header a:hover {
  color: blue;
}
.nav .logo {
  color: green;
}
.nav::before {
  content: "";
}

3.6 Less运算

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

@border: 5px + 5;
div {
  border: @border solid red;
}
// 生成的css
div {
  border: 10px solid red;
}
// 还可以这样写
width: (@width + 5) * 2;
img {
    width: (82 / 50)rem;
    height: (82 / 50)rem;
}

注意:

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

4 rem适配方案

  1. 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。
  2. 使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。

4.1 rem实际开发适配方案

  1. 按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小; (媒体查询)
  2. CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值;

4.2 rem适配方案技术使用（市场主流）

技术方案1：

  • less
  • 媒体查询
  • rem

技术方案2：

  • flexible.js
  • rem

方案2更简单

4.3 rem实际开发适配方案1

rem + 媒体查询 + less技术

  1. 设计稿常见尺寸宽度
    在这里插入图片描述

一般情况下,我们以一套或两套效果图适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果 现在基本以750为准。

  1. 动态设置html标签font-size大小
  • 假设设计稿是750px
  • 假设我们把整个屏幕划分为15等份(划分标准不一 可以是20份也可以是10等份)
  • 每一份作为html字体大小,这里就是50px
  • 那么在320px设备的时候,字体大小为320/15就是21.33px
  • 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
  • 比如我们以750为标准设计稿
  • 一个100 * 100像素的页面元素在750屏幕下，就是100 / 50转换为rem是2rem * 2 rem比例是1比1
  • 320屏幕下，html字体大小为21.33则2rem = 42.66px 此时宽和高都是42.66 但是宽和高的比例还是1比1
  • 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果
  1. 元素大小取值方法
  • 最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数)
  • 屏幕宽度/划分的份数就是html font-size的大小
  • 或者:页面元索的rem值=页面元素值( px) / html font-size 字体大小
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (min-width: 320px) {
            html {
                font-size: 21.33px;
            }
        }
        @media screen and (min-width: 750px) {
            html {
                font-size: 50px;
            }
        }
        div {
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }
        /* 1. 首先选一套标准尺寸 750为准 */
        /* 2. 用屏幕尺寸除以划分的份数 得到了html里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
        /* 3. 页面元素的rem值 = 页面元素在750像素下的px值 / html里面的文字大小 */
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5 苏宁易购首页案例制作

案例：苏宁网移动端首页

访问地址：m.suning.com

  1. 技术选型
    方案:采取单独制作移动页面方案

技术:布局采取rem适配布局(less + rem + 媒体查询)

设计图:本设计图采用750px设计尺寸

  1. 搭建相关文件夹结构
    在这里插入图片描述

  2. 设置视口标签一引入初始化样式

<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
  1. 设置公共common.less文件
  • 新建common.less 设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
  • 我们关心的尺有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
  • 划分的份数我们定为15等份
  • 因为我们pc端也可以打开我们苏宁移动端首页,我们默认html字体大小为50px,注意这句话写到最上面
  1. 新建index.less文件
  • 新建index.less 这里面写首页的样式
  • 将刚才设置好的common.less引入到index.less里面语法如下:
// 在index.less中导入common.less文件
@import "common"
  • 生成index.css 引入到index.html里面
  1. body样式
body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #F2F2F2;
}

6 rem适配方案2

6.1 简洁高效的rem适配方案flexible.js

它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。

我们要做的,就是确定好我们当前设备的html文字大小就可以

比如当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px / 10)就可以

里面页面元素rem值:页面元素的px值/ 75

剩余的,让flexible.js来去算

github地址:https://github.com/amfe/lib-flexible

6.2 使用适配方案2制作苏宁移动端首页

  1. 技术选型
    方案:我们采取单独制作移动页面方案
    技术:布局采取rem适配布局2 (flexible.js + rem)
    设计图:本设计图采用750px设计尺寸

  2. 搭建相关文件夹结构
    在这里插入图片描述

  3. 设置视口标签以及引入初始化样式还有js文件

<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

引入js文件

<!-- 在index.html中引入flexible.js这个文件 -->
<script src="js/flexible.js"></script>
  1. body样式
body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #F2F2F2;
}

6.3 VSCode px转换rem插件cssrem

这是一个神奇的插件

设置html字体大小基准值

  1. 打开设置 快捷键是ctrl + 逗号
  2. 搜索cssrem.root调整大小
    在这里插入图片描述

最后效果
在这里插入图片描述

前进的北极熊
关注
专栏目录
移动web开发之自适应布局解决方案一: less+媒体查询+rem
qq_37635012的博客
12-11 1157
移动端自适应解决方案之rem和媒体查询
html手机端页面meta,移动端网页meta设置和响应式
weixin_39634900的博客
06-03 3532
苏宁易购WAP的meta分析响应式meta设置媒体查询时读的width为viewport的宽度。viewport宽度为手机分辨率。比如note2 1280*720.需要重置为设备 640*360方式类型cssjavascript原理媒体查询宽、高范围。设置html的font-size基准值(window.innerWidth/psd的初始化宽度)*psd的初始font-size。算出当前网页的fo...
less+rem+媒体查询布局
原地起飞
09-09 469
不要吝啬你的点赞评论加关注哦一、rem单位二、媒体查询1.什么是媒体查询2.语法规范1.mediatype 查询类型2.关键字3.媒体特性3.引入资源（理解）三、less基础1.less变量四、适配及原理总结 一、rem单位 rem（root em）是一个相对单位，类似于em。 1、em 是相对于父元素的字体大小来说的 2、rem 是 相对于 html 元素的字体大小来说的 3、rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小，可以整体控制 二、媒体查询 1.什么是媒体查询
移动web开发之rem布局和less的相关
zh_hunan的博客
11-04 369
rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 媒体查询 什么是媒体查询 媒体查询（Media Query）是CSS3新语法。 使用 @media查询，可以针对不同的媒体类型定义不同...
目前最火的前端布局方式：less+rem+媒体查询
bigpatten的博客
02-10 3497
1. rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小，rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体...
less+rem+媒体查询布局(主流)
最新发布
ldd_eb的博客
04-10 510
子类自身/伪类。
使用两种rem布局方案-实现静态苏宁易购移动端首页
SHoadgnaw的博客
03-29 2673
使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询htmlcommon.lessindex.less方案2:flexible.js+rem小插件小问题htmlindex.lessflexible.js 方案1:rem+less+媒体查询 跟其他页面不同的文件，需要新建common.less文件 用媒体查询设置不同的html字体大小 因为除了首页其他页面也要 尺寸为 320px 360px 375px 400px 414px 424px 480px 540px 720px
移动端苏宁首页制作和rem
qq_44757223的博客
04-11 1518
制作苏宁移动端首页的两种方法、px转换为rem
移动web开发 rem适配布局 +苏宁首页案例+HBuilder下载less插件
phoebemeng的博客
07-21 517
移动web开发 rem适配布局 +苏宁首页案例+HBuilder下载less插件
移动Web开发之 rem适配布局----苏宁首页案例制作
不爱吃菜的菜菜的博客
05-13 720
目录 1. 技术选型 2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式 4. 设置公共common.less文件 5. 新建index.less文件 6. body样式 7.细节 1. 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取rem适配布局（less + rem + 媒体查询） 设计图： 本设计图采用 750px 设计尺寸 2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式 <meta na...
前端移动开发布局_rem+less+媒体查询
宫小白
01-28 454
知识导航 何为rem 何为媒体查询 何为less 1. 何为rem rem (root em)是一个相对单位，类似于em，em是父元素字体大小。而rem的参照物是html的fontsize 比如 html { font-size: 20px; } div { width: 2rem; ...
H5移动开发布局之-------rem布局与媒体查询（less）
weixin_45176415的博客
11-03 887
rem 布局 1. 基本概念 语法：只要子元素的属性值，设置采用rem单位，就会跟着发生等比变化；唯一控制（HTML是唯一）； rem单位，可以控制整个页面所有元素有关PX类；（宽、高、padding、margin、top…）只要是你设置数值的地方都可以实现控制； -例子 1.根html 为 15px html { font-size: 15px; } 2.此时 div 的宽就是 100px...
less+rem 布局
weixin_44768794的博客
01-11 544
Less是一门css扩展语言，也成为预处理器 Less+rem布局LessLess变量Less编译Less嵌套Less运算（重点）rem适配方案适配目标如何达到目标在实际开发中使用适配方案1 rem+less技术+媒体查询苏宁首页案例制作import导入样式 Less Less变量 变量没有特定的值，需改变。例如：颜色和数值等经常使用。 @变量名：值； 注意： 必须有@为前缀 不能包含特殊字符 不能以数字开头 大小写敏感 @color:pink; span { background-color: @
媒体查询(rem)配合less使用
vGuYi的博客
05-16 1094
屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好 百分比布局特点宽度自适应，高度固定 Flex布局更多的解决了盒子的排列方式，高度很难适配 所以都不能实现 需要配合 rem 单位 设置元素的尺寸（宽度/高度） 最终适配 那么什么是rem了? rem是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 rem的使用场景： 我们只需要修改html 的文字大小，就可以完成元素大小的等比例缩放 媒体查询 设置差异化CSS样式 ..
移动web开发rem适配布局(rem+Less+媒体查询)
qq_49900295的博客
03-24 1772
文章目录移动端基础meta视口标签物理像素&物理像素比移动端多倍图做法移动端css初始化移动端特殊样式rem 单位rem适配布局原理媒体查询什么是媒体查询语法规范注意mediatype 查询类型关键字媒体特性媒体查询+rem实现元素动态大小变化案例引入资源语法规范案例Less基础什么是LessLess变量语法规范：变量命名规范：Less编译 移动端基础 meta视口标签 我们在移动端开发时都要加上这句话： <meta name="viewport" content="width=device-
媒体查询、LESS基础
yangyanqin2545的博客
11-19 558
媒体查询 在不改变页面内容的情况下，为不同的设备特性（屏幕尺寸、横竖屏等）定制显示效果 语法： 样式表内引入（内、外部样式表） @media 媒体类型 and (媒体特性表达式){ //样式 } 常用媒体类型 all 所有 screen 屏幕设备 常用媒体特性 width/height 宽高 device-width/height 设备宽高 min- / max min-width/height 横竖屏 orientation： landscape portrait 竖屏
less语法 + rem适配布局
weixin_43845137的博客
01-05 2083
一、less语法： 一、less语法之中的变量 less语法：是一门CSS扩展语言，也是CSS预处理器 它在CSS的语法基础上，引入了变量，Minxin（混入），运算以及函数等功能，大大简化了CSS编写 注：第一次使用的时候需要下载less，之后安装less插件-Easy LESS - 安装后，一保存less文件，自动生成一个css文件，直接导入css文件就好 // 1：less变量 @变量名...
移动端less+rem布局
xustart7720的博客
04-25 415
一、直接上例子啦 html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" conte...
移动端适配策略：媒体查询、Flex弹性布局与rem+viewport解析
本文将总结几种主流的移动端前端适配技术方案，包括CSS3媒体查询、Flex弹性布局以及rem+viewport缩放。 1. CSS3媒体查询（Media Queries） 媒体查询是通过CSS3引入的一种技术，允许开发者根据设备的特性（如视口...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值