移动web开发rem适配布局-编程知识

移动web开发rem适配布局

学习目标:

能够使用rem单位
能够使用媒体查询的基本语法
能够使用Less的基本语法
能够使用Less中的嵌套
能够使用Less中的运算
能够使用2种rem适配方案

1.rem单位基础

2.媒体查询

2.1什么是媒体查询

媒体查询是css3的新语法

使用@media查间，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

2.2语法规范

@media mediatype and|not|noly (media feature){css-code;
}

用@media开头注意@符号
mediatype媒体类型
关键字 and not only
media feature 媒体特性必须有小括号

1.mediatype 查询类型

将不同的终端设备划分成不同的类型,称为媒体查询

在这里插入图片描述

2.关键字

关键字将媒体类型或多个媒体特性链接到一起做为媒体查询的条件

and:可以将多个媒体特性连接到一起,相当于"且"的意思
not:排除某个媒体类型,相当于"非"的意思,可以省略
only:指定某个特定的媒体类型,可以省略

3.媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意他们要加小括号包含

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3V0wF8JB-1692882823550)(img/image-20230819100223878.png)]

   <style>/* 这句话的意思就是：在我们屏幕上并且最大的宽度是800像素设置我们想要的样式 *//*max-width小于等于800*//*媒体查询可以根据不同的屏幕尺寸在改变不同的样式*/@media screen and (max-width:800px) {body {background-color: pink;}}@media screen and (max-width:600px) {body {background-color: skyblue;}}</style>

2.3媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rm就可以实现不同设备宽度，实现页面元素大小的动态变化

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@media screen and (min-width:320px) {html {font-size: 50px;}}@media screen and (min-width:640px) {html {font-size: 100px;}}.top {height: 1rem;color: #fff;line-height: 1rem;text-align: center;font-size: .5rem;background-color: green;}</style>
</head><body><div class="top">购物车</div>
</body></html>

3.less介绍

Less(Leaner Style Sheets的缩写)是一门CSS扩展语言，也成为CSS预处理器。
做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS的语法基础之上，引入了变量，Mix(混入)，运算以及函数等功能，大大简化了CSS的编写,并且降低了CSS的维护成本，就像它的名称说的那样，Lss可以让我们用更少的代码做更多的事情。
Less中文网址：http://lesscss.cn☑
常见的CSS预处理器：Sass、Less、Stylus

一句话：Less是一门CSS预处理语言，它扩展了CSS的动态特性。