CSS学习笔记14——移动端相关知识(rem,媒体查询,less)

移动端

rem适配布局

rem单位

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

  • 父元素设定font-size,子元素根据rem缩放对应字体大小

媒体查询(Media Query)

  • @media可以针对不同屏幕尺寸设置不同样式
  • 当你重置浏览器大小过程中,页面也会根据浏览器宽度和高度重新渲染页面
css 复制代码
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
  • mediatype媒体类型
解释说明
all 用于所有设备
print 用于打印机和打印浏览
scree 用于电脑屏幕,平板电脑,智能手机等
  • 关键字 and not only 将多个媒体特性连接到一起作为媒体查询的条件
解释说明
and "且"可以将多个媒体特性连接到一起
not "非"排除某个媒体类型,可以省略
only 指定某个特定的媒体类型,可以省略
  • media feature媒体特性 必须有小括号包含
解释说明
width 定义输出设备中可见区域的宽度
min-width 定义输出设备中页面最小可见区域的宽度
max-width 定义输出设备中页面最大可见区域的宽度
css 复制代码
@media screen and (max-width:800px) {}
/*在屏幕上并且最大宽度是800像素 设置我们想要的样式*/

引入资源(使用两套css

css 复制代码
<link rel="stylesheet" media="mediatype and|not|only (media feature)" herf="mystylesheet.css"

Less基础

less变量

less 复制代码
@变量名:值;

less编译

Easy less 插件把less文件编译为css文件

less嵌套

less 复制代码
.header {
    width:200px;
    a {
        color:pink;
        &:hover {
            color:green;
        }
    }
}

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

  • 内层选择器前面没有&符号,则它被解析为父选择器的后代
  • 如果有&符号:被解析为父元素自身或父元素的伪类

less计算

  • 运算符中间左右有个空格隔开
  • 对于两个不同单位的值之间的运算,运算结果值取第一个值的单位
  • 如果只有一个值有单位,运算结果取该单位
相关推荐
姜 萌@cnblogs37 分钟前
Saga Reader 0.9.9 版本亮点:深入解析核心新功能实现
前端·ai·rust
gnip1 小时前
实现elementplus官网主题切换特效
前端·css
Darling02zjh1 小时前
HTML5
前端·html·html5
成长ing121381 小时前
闪白效果
前端·cocos creator
Lazy_zheng1 小时前
React架构深度解析:从 Stack 到 Fiber,解决 CPU 和 I/O 瓶颈问题
前端·react.js·前端框架
张元清1 小时前
什么是React并发模式中的Tearing(撕裂)
前端·面试
AndyLaw1 小时前
统计字符数错一半,我被 length 坑了两次
前端·javascript
草堂春睡足1 小时前
【Datawhale AI夏令营】科大讯飞AI大赛(大模型技术)/夏令营:让AI理解列车排期表
人工智能·笔记
关羽的小刀1 小时前
Element-UI最新版暗藏Lodash漏洞?一次真实项目安全排查记录
前端
张志鹏PHP全栈1 小时前
Vue3第五天,ref 和 reactive的介绍和区别
前端·vue.js