我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

康利-20221026-Web移动端rem布局

[复制链接]
智商不在服务区 发表于 2022-10-27 20:02:27 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、学习内容:
1.rem的概念
rem(root em)是一个相对单位,和em不同的是rem相对基准是对于html元素的字体大小来说的
优点:父元素的字体大小可能不一样,但是整个页面只有一个html标签,可以很好的控制整个页面的元素大小
2.媒体查询
使用@media来进行查询,可以针对不同的媒体类型定义不同的样式,也可以根据不同的屏幕尺寸来设定不同的样式时

媒体查询的语法规范:
用@media来进行开头
mediatype媒体类型
关键字and not only
media feature媒体特性,在小括号中书写
@media:mediatype and/not/only (media feature) {css-code};
3.less
维护css的弊端:
css是一门非程序式语言,没有变量、函数、作用域的概念。
css书写的时候会写大量的看似没有逻辑的代码,冗余程度比较高
不方便扩展和复用
css没有很好的计算能力
less介绍:作为css的一种形式的扩展,它并没有减少css的功能,而且在现有的css语法上,其增加了程序式语言的特性
基本的运算有加减乘除1. 运算符左右两边要有空格隔开
2. 除法运算需要在运算外加括号,否则不生效
3. 对于两个不同的单位的值之间的运算,运算结果取前面的值的单位
4. 如果两个参与计算的数值,只有一个值有单位,那么就用有单位的值的单位

rem的适配方案:原理:让一些不能等比例自适应的元素达到不同的尺寸时,根据html字体的大小变化来用rem作为单位,控制元素进行自适应变化。
回复

使用道具 举报

关注0

粉丝0

帖子68

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026