移动Web开发01

最新推荐文章于 2023-02-12 19:04:09 发布

CodeLin-web

最新推荐文章于 2023-02-12 19:04:09 发布

阅读量127

点赞数

分类专栏：阶段二：移动Web网页开发文章标签： less

本文链接：https://blog.csdn.net/qq_45077122/article/details/114494721

版权

5 篇文章 0 订阅

订阅专栏

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

rem的优点，可以通过修改html里面的文字大小，来改变页面中元素的大小，来实现整体控制

在这里插入图片描述
语法规范：

媒体特性：

and不能省略
宽度必须加单位px

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

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

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

当样式比较繁多时，可以针对不同的媒体使用不同的stylesheets（样式表）
在这里插入图片描述

less基础

在这里插入图片描述

他在css的语法基础上，引入了变量，运算以及函数等功能，大大简化了css的编写。

一句话：less是一门css预处理语言，他扩展了css的动态特性/
在这里插入图片描述

语法：
在这里插入图片描述

变量命名规范

伪类选择器的less写法

在这里插入图片描述
空格，单位有一个数写了就行

注意：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
总结：
1、两种方案现在都存在。
2、方案2更简单

设计稿常见尺寸宽度

现在基本以750为准
动态设置html标签font-size大小

假设设计稿是750px，先把整个屏幕划分为15等分，那么一份html的font-size就是50px；实现了元素盒子等比例缩放的效果。
元素大小取值方法：
*屏幕宽度/划分的份数：就是html font-size的大小
*页面元素的rem值=页面元素值（px）/ html font-size字体大小

不要忘记设置大于750px尺寸的情况

@media screen and (min-width:750px){
	html{
		font-size:75px !important(不要忘记提高优先级，不然白改)
		}
	}

关注