目标:
1)能够使用rem单位
2)能够使用媒体查询的基本语法
3)能够使用Less的基本语法
4)能够使用Less中的嵌套
5)能够使用Less中的运算
6)能够使用2中rem适配方案
7)能够独立完成xx移动端首页
思考:
1、页面布局文字随屏幕大小变化而变化
2、流式布局和flex布局主要针对于宽度布局,现在针对于高度设置rem适配布局
3、在屏幕发生变化时 元素高度和宽度等比例缩放
rem基础
rem单位 以html 的font-size 尺寸做为单位,配合媒体查询设置
1)常见的单位: px(css像素)、em(以字符尺寸为单位)、pm 、 【绝对单位】cm(厘米)、mm(毫米)
2)rem(root em) 是一个相对单位,类似于em, em是父亲元素字体大小
3)不同的是rem 的基准是相对于html元素的字体大小。
4)根元素(html)设置font-size=12px;非根元素设置width:2rem; 相当于width:24px.
5)rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
媒体查询
1、什么是媒体查询
媒体查询**(Media Query) 是CSS3的新语法。
1)使用 @media 查询,可以针对不同的媒体类型定义不同的样式(类似于动画的使用)
2)@media 可以针对不同的屏幕尺寸设置不同的样式
3)当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度 重新渲染页面
4)目前针对很多苹果手机、Android手机、平板等设备都用的到多媒体查询
2、语法规范
1)mediatype 查询类型
将不同的终端设备划分成不同的类型,称为媒体类型(screen)
2)关键字
关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件
a)and:可以将多个媒体特性连接到一起,相当于“且”的意思
b)not:排除某个媒体类型,相当于"非"的意思,可以省略
c)only:指定某个特定的媒体类型,可以省路
3)媒体特性
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。
注意:媒体特性写在小括号里、 设置min 或 max 都包含 相等的情况
3、媒体查询 + rem 实现元素动态大小变化
1)rem单位是跟看html变化的,有了rem,页面元素可以设置不同大小尺寸
2)媒体查询可以根据不同设备宽度来修改样式
3)媒体查询 + rem 就可以实现不同设备宽度,实现页面元素大小的动态变化
4、引入资源(理解)
1)当样式比较繁多的时候,我们可以针对不同的媒体使用不司stylesheets(样式表)。
2)原理,就是直接往link中判断设备的尺寸 ,然后引用不同的css文件。
语法:
Less基础
css写法的升级,并快速生成css文件
1、维护CSS的弊端
CSS是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
2、Less介绍
3、Less安装
1)安装nodejs,选择新版本,网址:http:l/nodejs.cn/dawnloadl
2)检查是否安装成功,命令〞node -v〞查看版本即可
3)基于nodejs在线安装Less,使用cmd命令 “npm install -g less ”
4)检查是否安装成功,使用cmd命令“lessc-v〞 查看版本即可
Less基础
Less使用: 我们首先新建一个后级名为less的文件,在这个ess文件里面书写less 语句。
1)Less变量
2)Less编译
3)Less嵌套
4)Less运算
4、Less变量
变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
变量命名规范: @变量名: 值
1)必须@作为前缀
2)不能包含特殊字符
3)不能以数字开头
4)大小写敏感
5、Less编译
vscode Less插件(Easy LESS插件: 可以把 Less文件 编译为 css文件)
6、Less 嵌套
子元素的样式直接写在 父元素样式的 大括号内
注意:
7、Less 运算(重点***)
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
注意:颜色也可以计算
rem适配方案
思考:
1)适配的目标
2)如何达到目标
3)实际开发中如何使用
rem适配方案:
1、目标:设备尺寸发生变化、元素等比例适配设备
2、做法:媒体查询,根据设备尺寸设置html(font-size)rem 基准单位。然后页面的元素以rem 为单位就可以等比例缩放
1、rem实际开发适配方案
1)按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小;(媒体查询)
2)CSS中,设计稿元素的宽、高 相对位置等取值,按照同等比例换算为rem 为单位的值
2、rem适配方案技术使用
3、rem实际开发适配方案1( rem + 媒体查询 + less技术)
1)设计稿常见尺寸宽度 (640px / 720px / 750px等)
一般情况下,我们以一套或两套效果图适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果现在基本以750为准
2)动态设置html标签font-size大小
3)元素大小取值方法
第一步:屏幕宽度(px) / 横向划分的份数 = html font-size 的大小(px)
第二步:页面元素(px) / html font-size的大小(px) = 页面元素的rem值
总计: 页面元素的rem值。 = 页面元素(px)/ ( 屏幕宽度(px)/ 横向划分份数 )
标签:24,WEB,元素,Less,适配,媒体,查询,rem From: https://www.cnblogs.com/changdasheng/p/17474788.html