CSS 变形 transform
1、translateX/Y
**变形(transform): ** 就是指通过CSS来改变元素的形状或位置,变形不会影响到页面的布局。使用transform标签来设置元素的变形效果。
平移: 平移元素,百分比是相对于自身来计算的。
- translateX(),沿着x轴方向平移;
- translateY(),沿着y轴方向平移;
- translateZ(),沿着z轴方向平移;
transform: translateX() translateY(); /*变形的多个值之间使用空格隔开*/
注意,在同一个元素的css样式中,只能出现一个transform,否则会出现transform覆盖的问题,所以在写transform变形时,要将所有的变形写到一个transform中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变形</title>
<style>
body{
background-color: #F5F5F5;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 0 auto;
margin-top: 100px;
transform: translateX(50%);
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
}
.box3{
display: inline;
background-color: pink;
/* 将元素在屏幕中间居中 */
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.wrapper{
width: 500px;
height: 300px;
margin: 50px auto;
}
.box4,.box5{
width: 220px;
height: 300px;
background-color: #fff;
float: left;
/* 设置渐变 */
transition: transform .2s;
}
.box4{
margin-right: 60px;
}
.box4:hover,.box5:hover{
/* 将元素上移4个像素 */
transform: translateY(-4px);
box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<!-- <div class="box1"></div> -->
<!-- <div class="box2"></div> -->
<!-- <div class="box3">aaa</div> -->
<div class="wrapper">
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>
2、translateZ
z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近。z轴平移属于立体效果(近大远小),默认情况下网页不支持透视,如果需要看见效果,必须要设置网页的视距,通常我们是给html元素设置视距,且值一般是600~1200px之间,如下:
body{
/*设置当前网页的视距为800px,人眼距离网页的距离*/
perspective: 800px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transformZ</title>
<style>
body{
perspective: 800px;
border: 1px solid red;
background-color: #f5f5f5;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
margin: 100px auto;
/* 设置过渡效果 */
transition:all 2s;
}
body:hover .box1{
transform: translateZ(200px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
3、缩放
对元素进行缩放的函数:
- scaleX(),水平方向的缩放;
- scaleY(),垂直方向的缩放;
- scale(),双方向的缩放;
/*元素在x轴与y轴上都同时变大。*/
transform: scale(2);
这里并没有介绍到关于Z轴的缩放,关于Z轴的缩放时,在3d环境下才能比较直观的看出来,使用的较少,这里不做详细的介绍,最后关于scale缩放练习代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
.introduce{
width: 50%;
margin: 0 auto;
text-align: center;
font-size: 20px;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
margin: 50px auto;
margin-bottom: 100px;
/* 设置过渡效果 */
transition: transform 2s;
}
.box1:hover{
transform: scale(2);
}
.box2{
width: 120px;
height: 79px;
margin: 0 auto;
/* 当图片放大时,切除超过父元素的宽度 */
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
/* 设置图片大小 */
.box2 img{
width: 120px;
vertical-align: middle;
transition: transform .5s;
}
/* 设置鼠标移入图片时,图片进行缩放的效果。 */
.box2:hover img{
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="introduce">
将鼠标放到以下元素上时,元素会进行缩放!
</div>
<div class="box1">
</div>
<div class="box2">
<img src="../exercise/10_电影卡片/1.jpg" alt="">
</div>
</body>
</html>
4、变形时的参考点
使用transform-origin可以指定变形时的原点,通常是两个值,可选值如下:
- center,默认值,原点在元素的中间;
- 像素,如:transform: 0px 0px;参考值在元素左上角;
5、旋转
通过旋转可以使元素沿着x、y或z轴旋转指定的角度,设置的方式如下:
- rotateX(),沿着X轴转动;
- rotateY(),沿着Y轴转动;
- rotateZ(),沿着Z轴转动;
其中的里面值的单位有:度(deg)、圈(turn),通常情况下我们还可以配合translateX/Y/Z来使用:
transform: translateX(100px) rotateY(180deg);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
body{
border: 1px solid red;
perspective: 800px;
}
.box1{
width: 320px;
height: 320px;
background-image: url('../exercise/img/13_旋转/an.gif');
margin: 0 auto;
vertical-align: middle;
transition: all 2s;
/* 影藏背景图片的背面 */
backface-visibility: hidden;
}
body:hover .box1{
/* transform: translateX(100px) rotateX(30deg); */
transform: translateX(100px) rotateY(180deg);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
旋转的练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鸭子表</title>
<style>
.block-wrapper{
width: 500px;
height: 500px;
margin: 20px auto;
border-radius: 50%;
background-image: url('../img/14/1024px-Analogue_clock_face.svg.png');
background-size: cover;
position: relative;
}
/* 时分秒在时钟中应该全部是居中的 */
.block-wrapper > div{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
/* 设置时针 */
.hour-wrapper{
width: 50%;
height: 50%;
/* background-color: #bfa; */
animation: run 3600s infinite linear;
}
.hour-wrapper .hour{
width: 6px;
height: 50%;
background-color: black;
margin: 0 auto;
}
/* 分针 */
.minute-wrapper{
width: 70%;
height: 70%;
animation: run 600s infinite linear;
}
.minute-wrapper .minute{
width: 6px;
height: 50%;
background-color: black;
margin: 0 auto;
}
/* 秒针 */
.second-wrapper{
width: 85%;
height: 85%;
animation: run 60s infinite steps(60, end);
}
.second-wrapper .secode{
width: 6px;
height: 50%;
background-color: black;
margin: 0 auto;
}
/* 指针旋转的关键帧 */
@keyframes run {
from{
transform: rotateZ(0);
}
to{
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="block-wrapper">
<!-- 时针 -->
<div class="hour-wrapper">
<div class="hour"></div>
</div>
<!-- 分针 -->
<div class="minute-wrapper">
<div class="minute"></div>
</div>
<!-- 秒针 -->
<div class="second-wrapper">
<div class="secode"></div>
</div>
</div>
</body>
</html>
CSS less语言
1、css定义变量
原生的css也支持变量的定义,格式如下:
html{
/*css 原生定义变量的格式:*/
/*--变量名: 变量值;*/
--color: #bfa;
--lenght: 100px;
}
定义好变量之后,我们就可以元素的样式找那个使用这个变量,如下:
.box1{
width: var(--length);
height: var(--length);
background-color: var(--color);
}
如上的代码,定义了一个宽、高个100px,背景颜色为#bfa的元素,以上代码等价于以下代码:
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
}
以上代码简单的展示了原生css定义变量的方法,但是这种方法存在最大的缺点就是兼容性不好,因而使用的很少,同样css中也支持函数自动计算的函数,如:calc()用于计算的函数,同样由于兼容性差的原因,使用的也比较少。
width: 80px; /*80px 等价于 calc(160px/2)*/
width: calc(160px/2);
2、less的简介
less是一门css的预处理语言,是一个css的增强版,通过less可以编写更少的代码实现更强大的样式。但是我们在使用less编写的代码时,浏览器并不能直接识别,这时我们就需要安装一个类似将less代码装换为浏览器可以认识的代码的插件,在VS_CODE中,我们可以添加easy less插件来进行翻译,注,在编写less脚本文件的时候,文件的后缀名是.less。
如,我们在less文件中编写如下代码,将代码保存后,会在同一个目录文件下自动生成与less文件同名的一个css文件,而这个css文件就是less转换器转换生成的。
less中的代码:
body{
width: 100px;
height: 100px;
// 将body中的div的字体颜色设置为红色。
// 注意,这里的这种写法在css文件是是不对的,但是在less文件中则可以正常被翻译。
div{
color: red;
}
}
css中的代码:
body {
width: 100px;
height: 100px;
}
body div {
color: red;
}
3、less语法
less中的单行注释是双斜杠,且less中注释的内容不会生成到css文件中,而/**/是css中的注释,也是less中的多行注释,它会被解析到生成的css中间中。
变量: 在变量中可以存储任意值,并且我们可以在需要是,任意的修改变量的值。变量的语法如下:
@变量名: 变量值; // 如:@a: 100px;
在使用变量时,如果是直接使用,则以 @变量名 的形式使用即可,如果作为类名,或者一部分值使用时,必须以 @{变量名} 的形式来使用,变量发生重名时,会优先使用比较近的变量,也可以在变量声明前就是用变量(不推荐,因为不好维护)。也可以将一个属性作为另个属性的值,只要在这个属性的前面加上一个$符号即可,如将width作为height的值,则为:height: $width;。
练习代码如下:
// 双斜杠是less中的注释,注释中的内容不会被解析到css文件中,而/**/是css中的注释,会被解析到css文件中。
.box1{
background-color: #bfa;
// box1 的子元素box2
.box2{
background-color: #ff0;
// box2的子元素box4
.box4{
background-color: red;
}
}
// box1的子元素box3,同时box3也是box2的兄弟元素
.box3{
background-color: orange;
}
}
// 定义变量
@a: 100px;
@b: #bfa;
@c: box6; // 以类名作为变量值
// 在类中使用变量
.box5{
width: @a;
color: @b;
}
// 将变脸作为类名
.@{c}{
width: @a;
// 这里将变量作为一部分值,也需要使用@{变量名}这种方式。
background-image: url('@{c}/1.png');
}
@d: 200px;
@d: 300px;
div{
// 变量发生重名时,会优先使用比较近的变量
@d: 115px;
width: @d;
// 在变量声明前就是用变量
height: @e;
}
@e: 300px;
.box7{
width: 100px;
// 将一个属性值作为另一个属性的值。
height: $width;
}
生成的css文件如下:
.box1 {
background-color: #bfa;
}
.box1 .box2 {
background-color: #ff0;
}
.box1 .box2 .box4 {
background-color: red;
}
.box1 .box3 {
background-color: orange;
}
.box5 {
width: 100px;
color: #bfa;
}
.box6 {
width: 100px;
background-image: url('box6/1.png');
}
div {
width: 115px;
height: 300px;
}
.box7 {
width: 100px;
height: 100px;
}
4、less父元素与扩展
&表示父元素选择器,元素使用:extend()进行扩展。
// 父元素
.box1{
// 后代元素
.box2{
color: red;
}
// 子元素
>.box3{
color: yellow;
&:hover{
// &父元素选择器,即box3
color: blue;
}
}
// 父元素选择器
// &表示父元素选择器,即box1
&:hover{
color: orange;
}
// &也可以写在后面,如:
// 表示div下面的box1加载hover
div &:hover{
color: yellowgreen;
}
}
// 扩展,可以理解为编程语言中的继承
// extend(),相当于对当前选择器扩展指定选择器的样式(选择器分组)。
.p1{
width: 100px;
height: 100px;
}
// p2继承p1,如果继承后元素什么都不写,则类似于css中的分组选择器
.p2:extend(.box1 > .box3){
// 这里编写的内容在p2作为p1的扩充
color: bisque;
}
.p3{
// 直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了复制,这种方式又叫做:混合(mixin)。
.p1();
}
// 使用类选择器时可以在选择器后边添加一个括号,这时实际上就创建了一个mixins。
.p4(){
width: 100px;
height: 100px;
background-color: #bfa;
}
// 对以上定义的mixins进行引用
.p5{
// 这里在引用时,后面的括号可以省略,效果与带括号的是一样的。且这里的p4并不会在css文件中出现。
.p4();
}
output:
.box1 .box2 {
color: red;
}
.box1 > .box3,
.p2 {
color: yellow;
}
.box1 > .box3:hover {
color: blue;
}
.box1:hover {
color: orange;
}
div .box1:hover {
color: yellowgreen;
}
.p1 {
width: 100px;
height: 100px;
}
.p2 {
color: bisque;
}
.p3 {
width: 100px;
height: 100px;
}
.p5 {
width: 100px;
height: 100px;
background-color: #bfa;
}
5、混合函数
**混合函数(mixin):**中可以直接设置变量,如:
// 定义混合函数
.test(@w, @h, @gb-color){
width: @w;
height: @h;
background-color: @gb-color;
}
// 引用混合函数
div{
.test(100px, 100px, #bfa);
}
output:
div {
width: 100px;
height: 100px;
background-color: #bfa;
}
在以上调用混合函数中,是按顺序传递参数的,这是传递的参数之间是有顺序要求的;也可以使用参数名进行调用,这是传递的参数之间没有顺序要求,如下:
div{
.test(@w: 100px, @h: 100px, @bg-color: #bfa);
}
当然也可以在定义混合函数时,给参数定义一个初始值,这样我们在调用的时候就可以不用赋值也行,如下:
// 定义混合函数时给参数赋初始值
.test(@w: 100px, @h: 200px, @bg-color){
width: @w;
height: @h;
background-color: @bg-color;
}
// 引用混合函数
div{
// 只给混合函数中没有赋初始值的参数传递值
.test(@bg-color: #bfa)
}
6、less的补充
在less中所有的数值都可以直接进行运算。加(+)、减(-)、乘(*)、除(/)。 如:
.box1{
width: 100px + 100px;
height: 100px * 2;
}
可以使用**@import “less文件”;**将其他less文件引入到当前文件,从而实现模块化操作。如:
// 引入其他less文件
@import "syntax.less";
以及配置浏览器解析到less文件中的代码行数,链接。
CSS 弹性 flex
1、弹性盒
弹性盒、伸缩盒(flex): 是CSS找那个的又一种布局手段,它主要用来代替浮动来完成页面的布局,flex可以使元素具有弹性,让元素可以跟随页面大小的改变而改变。
弹性容器: 要使用弹性盒,必须先将一个元素设置为弹性容器,我们可以通过display来设置弹性容器。
- display: flex;设置为块级弹性容器;
- display: inline-flex;设置为行内弹性容器,
块级与行内弹性容器的区别于块元素和行内元素的区别差不多,都是块会独占一行,而行内则不会。
弹性元素: 弹性容器的子元素称为弹性元素(弹性项),弹性元素可以同时是弹性容器。
主轴: 弹性元素的排列方向称为主轴,受到flex-direction属性的影响。
侧轴: 与主轴垂直的方向称为侧轴。
flex-direction: 弹性盒的属性,指定弹性容器中弹性元素的排列方向,可选值如下:
- row,默认值,弹性元素在容器中水平排列(从左向右),此时的主轴为:自左向右;
- row-reverse,弹性元素在容器中水平排列(从右向左),此时的主轴为:自右向左;
- column,弹性元素在容器中纵向排列(从上向下),此时的主轴为:自上向下;
- column-reverse,弹性元素在容器中纵向排列(从下向上),此时的主轴为:自下向上;
flex-grow: 弹性元素的属性,指定弹性元素的伸展系数,当父元素有多余的空间时,通过这个属性的设置,弹性元素会按照比例进行分配,可选值如下:
- 0是默认值,即不增长;
- 1指定增长系数为1,还可以指定2,3,4等,值越大,增长越多;
flex-shrink: 弹性元素的属性,指定弹性元素的收缩系数,当父元素中的空间不足以容纳所有的子元素时,如何对子元素进行收缩,缩减系数的计算方式比较复杂,缩减的多少是根据**”缩减系数“和”元素的大小“**共同来计算的。可选值如下:
- 0,不收缩;
- 1,默认值,等比例收缩;
- 2,3,4等,值越大,收缩的越多;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 300px;
border: 10px solid red;
/* 将ul设置为弹性盒 */
display: flex;
/* 设置弹性元素的排列方向 */
flex-direction: row;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 弹性元素的属性 */
/* flex-grow: 1; */
flex-shrink: 1;
}
li:first-child{
/* flex-grow: 1; */
}
li:nth-child(2){
background-color: pink;
/* flex-grow: 2; */
}
li:nth-child(3){
background-color: aqua;
/* flex-grow: 3; */
}
</style>
</head>
<body>
<ul class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
2、弹性容器
flex-wrap: 设置弹性元素是否在弹性容器中自动换行,可选值如下:
- nowrap,默认值,不会自动换行;
- wrap,弹性元素会沿着侧轴方向自动换行;
- wrap-reverse,弹性元素沿着侧轴反方向换行;
flex-flow: 是flex-direction与flex-wrap的简写属性,即可以同时设置这两个属性,如:
flex-flow: row wrap; /*弹性元素水平排列,其会自动换行。*/
justify-content: 弹性元素如何分配主轴上的空白空间(主轴上的元素如何排列),可选值如下:
- flex-start,默认值,元素沿着主轴起边排列;
- flex-end,元素沿着主轴终边排列(即靠在终边);
- center,元素居中排列;
- space-around,空白分布到元素的两侧(空白分布的不均匀);
- space-between,空白均匀分布到元素间;
- space-evenly,空白均匀分布到元素的两侧;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 800px;
border: 10px solid red;
/* 将ul设置为弹性盒 */
display: flex;
/* 设置弹性元素的排列方向 */
flex-direction: row;
justify-content: space-evenly;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 弹性元素的属性 */
/* flex-grow: 1; */
flex-shrink: 1;
}
li:first-child{
/* flex-grow: 1; */
}
li:nth-child(2){
background-color: pink;
/* flex-grow: 2; */
}
li:nth-child(3){
background-color: aqua;
/* flex-grow: 3; */
}
</style>
</head>
<body>
<ul class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
3、弹性容器的补充
align-items: 弹性元素在辅轴上的对齐方式,以及元素之间的关系。可选值如下:
- stretch,默认值,将元素的长度设置为相同的值;
- flex-start,元素不会拉伸,沿着辅轴起边对齐;
- flex-end,沿着辅轴的终边对齐;
- center,居中对齐;
- baseline,基线对齐,使用的较少;
align-content: 辅轴空白空间的分布,可选值与justify-content差不多,使用也差不多。
align-self: 用来覆盖当前弹性元素上的align-itmes;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性容器样式的补充</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 600px;
height: 800px;
border: 10px solid red;
/* 将ul设置为弹性盒 */
display: flex;
/* 设置弹性元素的排列方向 */
flex-flow: row wrap;
/* 设置副轴元素之间的对齐方式 */
align-items: flex-start;
align-content: space-between;
}
li{
width: 200px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
li:first-child{
/* align-self用来覆盖当前元素上的align-itmes */
align-self: stretch;
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: aqua;
}
li:nth-child(4){
background-color: chocolate;
}
li:nth-child(5){
background-color: yellow;
}
</style>
</head>
<body>
<ul class="clearfix">
<li>1</li>
<li>2
<div>
2
</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>4</li>
<li>
5
<div>6</div>
</li>
</ul>
</body>
</html>
4、弹性元素
**flex-grow: ** 弹性元素的增长系数。
flex-shrink: 弹性元素的缩减系数。
flex-basis: 弹性元素的基础长度,指定的是元素在主轴上的基础长度;如果主轴是横向的,则该值指定的是元素的宽度;如果主轴是纵向的,则该值指定的是元素的高度,可选值如下:
- auto,默认值,表示参考元素自身的高度或宽度;
- 如果传递一个具体值,则以该具体值为准;
以上的这三个属性被称为弹性元素的三个基础属性,可以使用一个flex来进行设置,格式为:flex: 增长 缩减 基础;可选值:
- initial,相当于:flex: 0 1 auto;
- auto,相当于:flex: 1 1 auto;
- none,相当于:flex: 0 0 auto;此时相当于元素没有弹性。
order: 可以用来决定弹性元素的排列顺序,值越小,排在越前面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性元素</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 800px;
border: 10px solid red;
/* 将ul设置为弹性盒 */
display: flex;
/* 设置弹性元素的排列方向 */
flex-direction: row;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* flex-grow: 1; */
flex: initial;
}
li:first-child{
order: 3;
}
li:nth-child(2){
/* 通过order来改变元素之间的排列顺序 */
order: 2;
background-color: pink;
}
li:nth-child(3){
order: 1;
background-color: aqua;
}
</style>
</head>
<body>
<ul class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
像素
像素: 屏幕是有一个一个发光的小点构成,这一个个的小点就是像素;分辨率:1920x1080说的就是屏幕中小点的数量,在前端开发中像素要分成两种情况讨论,css像素和物理像素。
css像素: 编写网页是,我们所用的像素像素都是CSS像素。
物理像素: 上面所说的一个个小点点就是物理像素。
浏览器在现实网页时,需要将css像素转换为物理像素然后在呈现出来,一个css像素最终由几个物理像素来显示,这个是由浏览器来决定的,默认情况下在pc端,一个css像素 = 一个物理像素。
视口(viewport): 视口就是屏幕中用来显示网页的区域,可以通过查看视口的大小来观察css像素和物理像素的比值,默认情况下:
-
视口宽度:1920px(css像素),
1920px(物理像素);此时css像素和物理像素的比是1:1;
-
放大两倍时的情况,视口宽度:960px(css像素),
1920px(物理像素),此时css像素和物理像素的比是1:2;
-
即我们可以通过改变视口的大小,来改变css像素和物理像素之间的比值;
1、手机像素
在不同的屏幕中,单位像素的大小是不同的,像素越小屏幕月清晰,如:24寸,1920x1080;iPhone6 4.7寸,750x1334px;由上可见,智能手机的像素点远远小于计算机的像素点。
问题:一个宽度为900px的网页如何在iPhone6中显示呢?默认情况下,移动端的网页都会将视口设置为980像素(css像素),以确保pc端网页可以在移动端正常访问,但是如果网页的宽度超过了980,移动端的浏览器会自动对网页进行缩放。
所以基本大部分的pc端网址都可以在移动端中正常浏览,但是往往读不回有一个好的体验,为了解决这个问题,大部分网站都会专门为移动端设计网页。
2、完美视口
移动端默认情况的视口大小是980px(css像素),默认情况下,移动端的像素比就是:视口大小/移动设备宽度(980/750),如果我们直接在网页中编写移动端代码,这样在980的视口下,像素比是非常不好的,导致网页中的内容非常的小。
编写移动端页面时,必须要确保有一个比较合理的像素比,如1个css像素 对应2个物理像素或3个物理像素等,我们可以通过mate标签来设置视口大小。
每一款移动设置设计时,都会有一个最佳的像素比,一般我们只需要将像素比设置为该值即可得到一个最佳效果,将像素比设置为最佳像素比的视口大小我们称其为 完美视口 。
将网页设置为完美视口:
<!-- viewport 表示视口,在移动端我们只需要设置宽度即可,device-width即表示完美视口,initial-scale即表示缩放值为1,与的作用device-width差不多,这里只是为了确保能够生效。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
结论: 在编写移动端页面时,就把上边的代码先写上。
3、vw单位
由于不同的设备的完美视口是不一样的,如:iPhone6的完美视口是375,iPhone6plus的完美视口是414;由于不同设备的视口和像素比不同,所以同样的375px个像素在不同的设备下意义不一样,比如在iPhone6中375px是全屏,而在iPhone6plus中则会缺一块,所以在移动端开发时,就不能再使用px来进行布局了。
vw 表示的是视口的宽度(viewport width),100vw = 一个视口的宽度,1vw = 1%视口的宽度。vw这个单位永远是相对于视口宽度进行计算的。
<!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>vm单位</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 6.4vw;
height: 4.667vw;
background-color: #bfa;
}
</style>
</head>
<body>
<!--
设计图的宽度:
750px 1125px这些都是375的倍数
设计图:
750px
使用vw作为单位:
100vw
创建一个48px x 35px大小的元素
100vw = 750px(设计图的像素),则0.1333333333333333vw = 1px
6.4vw = 48px(设计图像素)
4.667vw = 35px(设计图大小)
-->
<div class="box1">
</div>
</body>
</html>
4、vw适配
<!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>vw的适配</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
/*
网页中字体大小是12px,不能设置一个比12px更小的字体了,如果我们设置了一个比12px还小的字体,则字体会自动设置为12px。
0.13333vw = 1px
5.3333vw = 40px
*/
font-size: 5.333333333333332vw;
}
.box1{
/*
rem = 1 html的字体大小;
经过以上的换算之后,得到以下关系:
1 rem = 40px(设计图大小)
*/
/* 48/40 */
width: 1.2rem;
/* 35/40 */
height: 0.875rem;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
CSS 媒体查询
响应式布局: 网页可以根据不同的设备或窗口大小呈现不同的效果,使用响应式布局,可以使一个网页适用于所有的设备,响应式布局的关键就是**“媒体查询”**,通过媒体查询,可以为不同的设备或设备的不同状态来分别设置样式。
响应式设计网页的两个原则:
- 移动端优先;
- 渐进增强;
1、媒体查询简介
使用媒体查询的语法如下:
@media 查询类型{}
媒体类型可选值如下:
- all,所有设备;
- print,打印设备;
- screen,带屏幕的设备;
- speech,屏幕阅读器;
可以使用逗号连接多个媒体类型,这样他们之间的关系是一个或的关系,使用and表示且的关系,使用not表示非的关系。如果在媒体类型前面添加一个only,表示仅仅,only的使用主要是为了兼容一些老版本浏览器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局</title>
<style>
/* 使用媒体查询 */
@media print, speech {
body{
background-color: #bfa;
}
}
/*
@media only screen{
body{
background-color: #fff;
}
}
*/
</style>
</head>
<body>
</body>
</html>
2、媒体查询补充
媒体特性:
-
width,视口的宽度;
-
height,视口的高度;
-
min-width,视口的最小宽度(视口大于指定宽度时生效);
-
max-width,视口的最大宽度(视口小于指定宽度时生效);
样式切换的临界点,我们称其为**“断点“** ,也就是网页的样式会在这个点时发生变化,一般比较常见的断电如下:
- 小于768,超小屏幕,max-width=768px;
- 大于768,小屏幕,min-width=768px;
- 大于992,中型屏幕,max-width=992px;
- 大于1200,大屏幕,min-width=1200px;
<!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>
/* 媒体必须是带屏幕且宽度介于500px与700px之间时,背景颜色发生变化。 */
@media screen and (min-width: 500px) and (max-width: 700px){
body{
background-color: #bfa;
}
}
</style>
</head>
<body>
</body>
</html>