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计算

  • 运算符中间左右有个空格隔开
  • 对于两个不同单位的值之间的运算,运算结果值取第一个值的单位
  • 如果只有一个值有单位,运算结果取该单位
相关推荐
拾光拾趣录17 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃34 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军35 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
kikikidult35 分钟前
(2025.07)解决——ubuntu20.04系统开机黑屏,左上角光标闪烁
笔记·ubuntu
中微子38 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游38 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子39 分钟前
智能前端实践之 shot-word demo
前端
归于尽40 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810140 分钟前
vite 插件
前端
无数山42 分钟前
autorelease pool
前端