移动端rem布局
在之前学习的布局中屏幕中的文字、高度、都是固定的，
用rem布局就能随屏幕大小的改变而等比例的进行改变
1.rem基础
1.1rem单位
在之前所学内容中的单位有px
rem（root em） 是一个相对单位，类似于em ，em是父元素字体大小
不同的是rem的基准是html元素的字体大小
html {
font-size: 12px;
}
div {
font-size: 12px;
width: 15rem;
height: 15rem;
background-color: purple;
}
p {
/* 1. em相对于父元素 的字体大小来说的 */
/* width: 10em;
height: 10em; */
/* 2. rem 相对于 html元素 字体大小来说的 */
width: 10rem;
height: 10rem;
background-color: pink;
/* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
}
2.媒体查询
2.1什么是媒体查询
媒体查询（Media Query)是CSS3新语法。
- 使用@media查询，可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前很多设备都用到了多媒体查询
2.2语法规范
@media mediatype and/not/only(media feature){}
- 用@media开头 注意@符号
- mediatype媒体类型
- 关键字 and not only
- media feature 媒体特色 必须有小括号包含
2.2.1 mediatype媒体查询类型
与终端设备相关
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 打印机、打印预览 | |
| screen | 用于电脑屏幕、平板电脑、智能手机 |
2.2.2 关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。
- and：连接多个媒体特性
- not：排除某个媒体类型
- only ：指定 某个媒体类型
<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>
2.3 媒体查询+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 {
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
2.4 引入资源
当样式比较繁多的时候，针对不容的媒体使用不同stylesheets
原理：就是在link中判断设备的尺寸，然后应用不同的css文件
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
3.less基础
3.1维护css的弊端
CSS是一门非程序语言，没有变量、函数、SCOPE（作用域）等概念
- CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
- 不方便维护级扩展，不利于复用
- CSS没有很多好的计算能力
- 非前端开发工程师来讲，往往会应为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目
直接pass掉less安装等有的没的 我还担心装了sass会不会有冲突，瞎忙活 easy less就完事了
3.4 less变量
@变量名:值;
3.4.1 变量命名规范
-
必须有@为前缀
-
不能包含特殊字符
-
不能以数字开头
-
大小写敏感
语法等笔记通sass差不多 ok 结束今天的学习2022.11.2
3.6 less 嵌套
3.7 less运算
对于两个不同的单位的值之间的运算，运算结果的值去第一个单位
如果两个值之间只有一个值有单位，则运算结果就取该单位
4.rem适配
1.让一些不能等比自适应的元素，达到当设备尺寸发生改变
的时候，等比例适配当前设备。
2.使用媒体查询根据不同设备按比例设置html的字体大小，
然后页面元素使用rem做尺寸单位，当html字体大小变化
元素尺寸也会发生变化，从而达到等比缩放的适配。
4.1rem实际开发适配方案
1.按照设计稿与设备宽度的比例，动态计算并设置html 根标签的font-size大小;(媒体查询)
2.CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值;
4.2 rem技术
| 技术方案1 | 技术方案2（推荐） |
|---|---|
| lee | flexible.js |
| 媒体查询 | rem |
| rem |
4.3 rem适配方案1
4.3.1常见设计尺寸宽度
根据市场手机决定
一般情况下，会以一套或两套效果图适应大部分的品目，放弃极端屏或对齐优雅降级牺牲一些效果
4.3.2 动态设置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但是已经能实现不同屏幕下页面光素盒子等比例缩放的效果
4.3.4元素大小取之方法
- 最后的公式︰页面元素的rem值=页面元素值( px )/（屏幕宽度│划分的份数)
- 屏幕宽度/划分的份数就是 html font-size的大小
- 或者:页面元素的rem值=页面元素值( px ) / html font-size字体大小
4.5.苏宁首页制作
4.5.1 技术
单独制作移动页面方案
技术：布局才去rem适配布局（less+rem+媒体查询）
设计图：750尺寸
4.5.2 搭建文件
4.5.3 设置视口标签以及引入初始化样式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
4.5.4 设置公共common.less文件
新建文件 设置常见屏幕尺寸，利用媒体查询设置不同的html字体大小
划分的分数定位15等份
4.5.5新建index.less文件
1.新建index.less 写首页的样式
- 导入common.less
@import "common"
3.生成index.css 引入到index.html
4.5.6.body样式
body {
min-width: 320px;
/* 页面宽度随屏幕改变*/
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
重点：
@baseFont: 50;
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 15rem;
height: 88rem / @baseFont;
height: 88rem / @baseFont;
假设当前屏幕宽度为750px ，且分为15等份
由于1rem = 750/15 =50px
那么屏幕宽度为750px时需要设置的高度为88px时，求需要设置为几rem
此时1rem = 50px 直接用相同单位下的px去计算rem值
x rem = 88/50 rem
4.6 rem适配方案2
4.6.1 简介高校的rem适配方案felxible.js
手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例列还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px /10)就可以里面页面元素rem值:页面元素的px值/75
剩余的，让flexible.js来去算
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
4.6.2 使用适配方案2制作苏宁移动端首页
技术发生改变
搭建文件时多个js文件夹
引入js
body样式也不变 只需更改rem值 15→10 同时需要限制最大宽度
body {
min-width: 320px;
max-width: 750px;
/* flexible 给我们划分了 10 等份 */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}
4.6.3 VSCode px转换rem 插件 cssrem
注意插件默认的font-size为16px
使用时需要进入setting.json修改cssroot
将16改为当前项目所需要的大小
使用flexible.js时会将html font-size更改为屏幕大小/10
当超出移动端最大宽度是 会发生变形
需要限定font-size的值
/* 如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来走 不会让我们页面超过750px */
@media screen and (min-width: 750px) {
html {
font-size: 75px!important;
}
}
！important 提权
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
