CSS单位-CSS预处理器-移动端视口
CSS单位
css单位分类
- 绝对长度单位
- 相对单位长度
绝对单位
- 它们与其他任何东西都没有关系，通常被认为是相同的大小
- 这些值中的大多数在用于打印时比用于屏幕输出更有用，例如，我们通常不会在屏幕上使用cm
- 经常使用的是px(像素)
- px
相对单位
- 相对长度单位相对于其他一些东西
- 比如父元素的字体大小，或者视图端口的大小
- 使用相对单位的好处，经过一些仔细的处理，可以使文本或其他元素的大小与页面上的其他内容相对应
- vw/vh/em/rem
em
- 相对于自己的字体大小
- font-size是可以被继承的属性，其本质还是相对自己的font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
font-size: 15px;
}
.box {
width: 10em;
height: 5em;
font-size: 20px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="box">我是box</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
font-size: 15px;
}
.box {
width: 10em;
height: 5em;
/* font-size: 20px; */
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="box">我是box</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
font-size: 15px;
}
.box {
width: 10em;
height: 5em;
font-size: 1em;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="box">我是box</div>
</div>
</body>
</html>
rem
- 相对于html元素的字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html {
font-size: 1.5px;
}
.box {
width: 100rem;
height: 100rem;
font-size: 20rem;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">我是box</div>
</body>
</html>
vw/vh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
}
.box {
width: 100vw;
height: 100vh;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
}
.box {
width: 10vw;
height: 10vh;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
像素
- 像素是影响显示的基本单位
- pixel
- pix -> picture
- el -> element
- 像素表示画像元素之意
分类
- 设备像素(物理像素)
- 设备独立像素(逻辑像素)
- css像素
设备像素(物理像素)
- 显示器的真实像素，每个像素的大小是屏幕固有的睡醒，屏幕出厂以后就不会改变了
- 我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小
- 比如iPhone X的分辨率1125 * 2436，指的是设备像素
逻辑像素
- 操作系统为开发者进行抽象，提供了逻辑像素的概念
css像素
- 等同于设置独立像素(逻辑像素)
DPR
- 设备像素比
- 一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比
PPI
- 每英寸的像素的密度
常见的css预处理器
- less
- scss
- stylus
less
- It`s CSS, with just a little more
- 一门css扩展语言，并且兼容css
- 增加了很多相比于css更好用的特性
- 比如定义变量，混入，嵌套，计算等等
- less最终需要被编译成css运行于浏览器中(包括部署到服务器中)
初体验
.container {
width: 200px;
height: 200px;
background-color: orange;
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* .container {
}
.container .box {
} */
/* .container {
.box {
}
} */
</style>
<link rel="stylesheet/less" href="./04-less的基本使用.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
.container {
width: 200px;
height: 200px;
background-color: orange;
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./04-less的基本使用.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
兼容
.box {
width: 100px;
height: 100px;
background-color: orange;
font-size: 20px;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./05-less语法-常见语法.less" />
<script src="./less@4.js"></script>
</head>
<body>
<!-- 兼容css -->
<div class="box">我是box</div>
</body>
</html>
变量
- @变量名: 变量值;
// 定义变量
@mainColor: #f3c258;
@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;
.box .pel {
color: @mainColor;
font-size: @normalFontSize;
}
.box h1 .keyword {
color: @mainColor;
font-size: @bigFontSize;
}
.box p .link {
color: @mainColor;
font-size: @smallFontSize;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./05-less语法-常见语法.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box">
<p class="pel">我是p元素</p>
<h1>我是h1元素<span class="keyword">关键字</span></h1>
<p>
我是一个大的段落
<a href="#" class="link">百度一下</a>
</p>
</div>
</body>
</html>
// 定义变量
@mainColor: #a40001;
@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;
.box .pel {
color: @mainColor;
font-size: @normalFontSize;
}
.box h1 .keyword {
color: @mainColor;
font-size: @bigFontSize;
}
.box p .link {
color: @mainColor;
font-size: @smallFontSize;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./05-less语法-常见语法.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box">
<p class="pel">我是p元素</p>
<h1>我是h1元素<span class="keyword">关键字</span></h1>
<p>
我是一个大的段落
<a href="#" class="link">百度一下</a>
</p>
</div>
</body>
</html>
嵌套
// 嵌套
@mainColor: #a40001;
@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;
.box {
p.pel {
color: @mainColor;
font-size: @normalFontSize;
}
h1 {
.keyword {
color: @mainColor;
font-size: @bigFontSize;
}
}
p {
a.link {
color: @mainColor;
font-size: @smallFontSize;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./05-less语法-常见语法.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box">
<p class="pel">我是p元素</p>
<h1>我是h1元素<span class="keyword">关键字</span></h1>
<p>
我是一个大的段落
<a href="#" class="link">百度一下</a>
</p>
</div>
</body>
</html>
&
- 特殊符号：& 表示当前选择的父级
// 嵌套
@mainColor: #a40001;
@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;
.box {
p.pel {
color: @mainColor;
font-size: @normalFontSize;
}
h1 {
.keyword {
color: @mainColor;
font-size: @bigFontSize;
}
}
p {
a.link {
color: @mainColor;
font-size: @smallFontSize;
&:hover {
color: #00f;
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./06-less语法-运算-混入-映射.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box">
<p class="pel">我是p元素</p>
<h1>我是h1元素<span class="keyword">关键字</span></h1>
<p>
我是一个大的段落
<a href="#" class="link">百度一下</a>
</p>
</div>
</body>
</html>
// 嵌套
@mainColor: #a40001;
@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;
.box {
p.pel {
color: @mainColor;
font-size: @normalFontSize;
}
h1 {
.keyword {
color: @mainColor;
font-size: @bigFontSize;
}
}
p {
a.link {
color: @mainColor;
font-size: @smallFontSize;
&:hover {
color: #00f;
}
}
}
}
// &符号的练习
.list {
.item {
font-size: 20px;
&:nth-child(1) {
color: orange;
}
&:nth-child(2) {
color: #00f;
}
&:hover {
color: @mainColor;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./06-less语法-运算-混入-映射.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box">
<p class="pel">我是p元素</p>
<h1>我是h1元素<span class="keyword">关键字</span></h1>
<p>
我是一个大的段落
<a href="#" class="link">百度一下</a>
</p>
</div>
<ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
</body>
</html>
运算
.box {
font-size: 20px;
width: 10% + 50px * 2;
height: 100px;
background-color: #ff0000 + #00ff00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./06-less语法-运算-混入-映射.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box">我是box</div>
</body>
</html>
混入mixins
.nowrap_ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.box1 {
width: 100px;
background-color: #f00;
.nowrap_ellipsis();
}
.box2 {
width: 150px;
background-color: #0f0;
.nowrap_ellipsis();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./06-less语法-运算-混入-映射.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box1">
box1 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
totam, molestias commodi sed dolores provident molestiae nisi ab rerum
facere iusto illo voluptates asperiores, veritatis ducimus eaque quia.
Necessitatibus, molestiae!
</div>
<div class="box2">
box2 -Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
soluta voluptates reiciendis consequuntur officia dolore deleniti quaerat
quos animi ducimus eveniet doloremque dolores corrupti ut dicta mollitia,
et, vitae aliquid.
</div>
</body>
</html>
混入高级版
.nowrap_ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.box_border(@boderWidth: 5px, @borderColor: purple) {
border: @boderWidth solid @borderColor;
}
.box1 {
width: 100px;
background-color: #f00;
.nowrap_ellipsis();
.box_border();
}
.box2 {
width: 150px;
background-color: #0f0;
.nowrap_ellipsis();
.box_border(10px, orange);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./06-less语法-运算-混入-映射.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box1">
box1 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
totam, molestias commodi sed dolores provident molestiae nisi ab rerum
facere iusto illo voluptates asperiores, veritatis ducimus eaque quia.
Necessitatibus, molestiae!
</div>
<div class="box2">
box2 -Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
soluta voluptates reiciendis consequuntur officia dolore deleniti quaerat
quos animi ducimus eveniet doloremque dolores corrupti ut dicta mollitia,
et, vitae aliquid.
</div>
</body>
</html>
映射
.nowrap_ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.box_border(@boderWidth: 5px, @borderColor: purple) {
border: @boderWidth solid @borderColor;
}
.box_size {
width: 100px;
height: 100px;
}
.box1 {
width: .box_size() [width];
background-color: #f00;
.nowrap_ellipsis();
.box_border();
}
.box2 {
width: 150px;
background-color: #0f0;
.nowrap_ellipsis();
.box_border(10px, orange);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./06-less语法-运算-混入-映射.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box1">
box1 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
totam, molestias commodi sed dolores provident molestiae nisi ab rerum
facere iusto illo voluptates asperiores, veritatis ducimus eaque quia.
Necessitatibus, molestiae!
</div>
<div class="box2">
box2 -Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
soluta voluptates reiciendis consequuntur officia dolore deleniti quaerat
quos animi ducimus eveniet doloremque dolores corrupti ut dicta mollitia,
et, vitae aliquid.
</div>
</body>
</html>
继承
.box_border {
border: 5px solid #f00;
}
.box {
width: 100px;
background-color: orange;
&:extend(.box_border);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./07-less语法-继承-函数-注释-导入.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box">我是box文本</div>
</body>
</html>
内置函数
.box {
color: color(skyblue);
width: convert(100px, "in");
font-size: ceil(19.7px);
height: floor(219.4px);
background-color: orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./07-less语法-继承-函数-注释-导入.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box">我是box文本</div>
</body>
</html>
作用域
- 在查找一个变量时，首先在本地查找变量和混合
- 如果找不到，则从父级作用域继承
@mainColor: #f00;
.box {
@mainColor: #0f0;
.item {
span {
color: @mainColor;
@mainColor: #00f;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./07-less语法-继承-函数-注释-导入.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box">
我是box文本
<div class="item">
我是item文本
<span>呵呵呵呵</span>
我是结束文本
</div>
</div>
</body>
</html>
@mainColor: #f00;
.box_mixin {
@mainColor: orange;
}
.box {
@mainColor: #0f0;
.item {
span {
color: @mainColor;
.box_mixin();
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet/less" href="./07-less语法-继承-函数-注释-导入.less" />
<script src="./less@4.js"></script>
</head>
<body>
<div class="box">
我是box文本
<div class="item">
我是item文本
<span>呵呵呵呵</span>
我是结束文本
</div>
</div>
</body>
</html>
注释
// 注释
/*
注释
*/
sass/scss
- sass 类似于Ruby的语法，没有花括号，没有分号，具有严格的缩进
- 直接学习scss既可
- less语法类似
移动端
移动端开发
- 原生APP开发(ios android rn uniapp flutter)
- 小程序开发(原生小程序，uniapp，taro)
- web页面(移动端的web页面，可以使用浏览器或者webview浏览)
自适应
- 根据不同的设备屏幕大小来自动调整尺寸，大小
响应式
- 会随着屏幕的实时变动而自动调整，是一种自适应
视口 viewport
- 在一个浏览器中，我们可以看到的区域就是视口(viewport)
- fixed就是相对于视口进行定位的
- 在pc端的页面中，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个
- 移动端的布局视口是大于视觉视口的
移动端视口划分
- 布局视口
- 视觉视口
- 理想视口
布局视口
- 默认情况下，一个在pc端的网页在移动端会如何显示呢
- 按照宽度为980px来布局一个页面的盒子和内容
- 为了显示可以完整的显示在页面中，对整个页面进行缩小
- 我们相对于980px布局的这个视口，称之为布局视口
- 布局视口的默认宽度是980px
视觉视口
- 如果默认情况下，我们按照980px显示内容，那么右侧有一部分区域就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中
- 那么显示在可见区域的这个视口，就是视觉视口
理想视口
- 布局视口和视觉视口重合
理想视口的设置.png
内容回顾
一、单位相关
1.1.css其他单位
- 绝对单位
- cm
- mm
- in
- px
- 相对单位
- em
- rem
- vw
- vh
1.2.pixel的深入理解
- pixel代表的含义
- 当前像素的分类
- 设备像素(物理像素)
- 设备独立像素(逻辑像素)
- css像素
1.3.DRP PPI
二、css预处理器
2.1.css弊端以及常见的预处理器介绍
2.2.less的介绍
- 介绍
- 编写less
- 编译less
- node
- 插件
- js文件
2.3.less语法
- 兼容css
- 定义变量
- 嵌套
- &
- 计算
- 混入
- 额外补充
- 继承
- 内置函数
- 作用域
- 注释
2.4.介绍SCSS
三、移动端的适配
3.1.移动端开发相关的概念理解
3.2.viewport
- 布局视口
- 视觉视口
- 理想视口
- 设置视口
- width
- initial-scale
- use-scalable
- minimum-scale
- maximun-scale
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
