1.移动端常见的布局
-
流式布局(百分比布局)
-
流式布局,就是百分比布局,也称非固定像素布局。
-
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
-
流式布局方式是移动web开发使用的比较常见的布局方式。
-
-
flex 弹性布局(强烈推荐)
-
less+rem+媒体查询布局
-
混合布局
响应式
-
媒体查询
-
bootstarp
1.2 布局视口、视觉视口、理想视口
布局视口:在PC端上,布局视口等于浏览器窗口的宽度。而在移动端上,由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里,此时的布局视口会远大于移动设备的屏幕,就会出现滚动条。
视觉视口:用户正在看到的网页的区域
布局视口:的一个理想尺寸,只有当布局视口的尺寸等于设备屏幕的尺寸时,才是理想视口。
1.3 rem (单位)
rem (root em)是一个相对单位,类似于em,em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
/* 根元素html为10px */
html {
font-size: 10px;
}
/* .box的宽度大小为200px */
.box {
width: 20rem;
}
页面元素的rem值 = 页面元素值(px) / html font-size 字体大小,
当前设计稿是 750px,假如我们把 html 文字大小设置为10px,
里面页面元素rem值: 页面元素的px 值 / 10,
2.媒体查询
使用CSS3 @media查询,你可以针对不同的设备类型以及设备的不同特性,定义不同的样式。
2.1 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时
2.2 最小宽度min-width
“min-width”与“max-width”相反,指的是媒体类型大于或等于指定宽度时 ,样式生效。
/* max-width 最大宽度 当前屏幕小于992px会应用当前媒体查询里面的样式 */
@media screen and (max-width:992px) {
.box {
width: 750px;
height: 400px;
background-color: skyblue;
}
}
/* 当前屏幕大于768px 应用媒体查询里面的样式 */
@media screen and (min-width:768px) {
.box {
background-color: purple;
}
}
2.3媒体查询语法
@media not|only mediatype and (expressions) and(expressions)...{
CSS-Code;
}
mediatype:设备类型;
expressions:设备特性;
使用 not,and 和 only 等逻辑操作符构建复杂的媒体查询,上面语法中的[ and (设备特性)]可以出现0~N次。
可以对多个设备特性进行匹配。
当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5
@media screen and (min-width:600px) and (max-width:900px){
body {
background-color:#f5f5f5;
}
}
一般把不同的屏幕的可视区域放进相应的css中,当不同的可视区域展示不同的页面
这就是响应式页面
是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
常用css适配
<!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>
* {
margin: 0px;
padding: 0px;
}
.container {
width: 1200px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
display: flex;
justify-content: space-between;
}
.container .content {
width: 290px;
height: 400px;
background-color: pink;
}
/* 创建多个媒体查询 */
/* 当屏幕小于1200px */
@media screen and (max-width:1200px) {
.container {
width: 970px;
}
.container .content {
width: 200px;
}
}
/* 当屏幕小于992 */
@media screen and (max-width:992px) {
.container {
width: 750px;
}
.container .content {
width: 175px;
}
}
/* 当屏幕小于768px */
@media screen and (max-width:768px) {
.container {
width: 100%;
/* display: flex; */
flex-wrap: wrap;
}
.container .content {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
</div>
</body>
</html>
2.4 引入不同的css文件
<link rel="stylesheet" media="screen and (max-width:1200px)" href="./css/w1200.css">
<link rel="stylesheet" media="screen and (max-width:992px)" href="./css/w992.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="./css/w768.css">
根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。
总结
媒体的主要目的是响应式涉及
在移动端常用
重点:rem
页面元素的rem值 = 页面元素值(px) / html font-size 字体大小,
当前设计稿是 750px,假如我们把 html 文字大小设置为10px,
里面页面元素rem值: 页面元素的px 值 / 10,