一.移动端特点
(1)移动端网页和PC端网页不同点
1.移动端:
-
手机屏幕 小 ， 网页宽度多数为 100%， 是适配手机屏幕宽度
-
移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性
2.移动端:
-
屏幕 大 ，网页 固定版心
-
PC端浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流）
(2)分辨率
1.屏幕尺寸:
指的是屏幕 对角线 的长度，一般用 英寸 来度量
2.硬件分辨率:
- 硬件分辨率（屏幕出厂设置） 这种分辨率我们称为物理分辨率，不可更改。
-
物理分辨率越大，显示的图片会约清晰。
3.逻辑分辨率:
-
软件 可以达到的
-
我们平时开发时候的像素单位是 逻辑分辨率，比如 border： 1px solid pink；
4.PC端中逻辑分辨率与物理分辨率的关系:
-
1逻辑分辨率 = 1物理分辨率
- 制作网页参考逻辑分辨率
(3)视口
1.布局视口
-
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
-
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
2.视觉视口
-
字面意思，它是用户正在看到的网站的区域。 注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
3.理想视口
为了使网站在移动端有最理想的浏览和阅读宽度而设定
-
理想视口，对设备来讲，是最理想的视口尺寸
-
简单理解： 设备有多宽，我的网页就显示有多宽
4.视口标签
目标:网页宽度和设备宽度(分辨率)相同
解决办法:添加视口标签
语法
-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
- viewport:视口
- width=device-width：视口宽度 = 设备宽度
-
initial-scale=1.0：初始页面缩放倍数
-
maximum-scale=1.0 最大缩放倍数
-
user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放
二.百分比布局
(1)百分比布局
1. 百分比布局， 也叫流式布局,宽度自适应，高度固定.
2.代码示例
<!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>
/* 百分比(流式)布局: 宽度自适应,高度固定 */
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 50px;
}
.box a {
float: left;
width: 20%;
height: 50px;
background-color: aqua;
}
.box a:nth-child(2n) {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</body>
</html>3.效果展示
三.Flex布局
(1) Flex布局(弹性布局)
1.Flex布局/弹性布局：
-
是一种 浏览器提倡 的 布局模型
-
避免 浮动脱标 的问题
-
布局网页 更简单、灵活
2.Flex布局模型构成:
1.作用:
- 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
-
Flex布局非常适合结构化布局
2.设置方式:
- 父元素添加 display: flex，子元素可以自动的挤压或拉伸
3.组成部分:
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴/交叉轴
3.主轴对齐方式
1.修改主轴对齐方式属性: justify-content
2.justify: 每行排齐方式
| 属性值 | 作用 |
|
flex-start
|
默认值, 起点开始依次排列
|
|
flex-end
|
终点开始依次排列
|
|
center
|
沿主轴居中排列
|
|
space-around
|
弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
|
|
space-between
|
弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
|
|
space-evenly
|
弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
|
4.侧轴对齐方式
1. 修改侧轴对齐方式属性:
-
align-items（添加到弹性容器-父级 ）
-
align-self： 控制某个弹性盒子在侧轴的对齐方式（ 添加到弹性盒子-子级 ）
| 属性值 | 作用 |
|
flex-start
|
起点开始依次排列
|
|
flex-end
|
终点开始依次排列
|
|
center
|
沿侧轴居中排列
|
|
stretch
|
默认效果 , 弹性盒子沿着侧轴线被 拉伸 至铺满容器
|
5.伸缩比
1.属性: flex : 值;
2. 取值分类: 数值(整数)
3.注意:
-
只占用父盒子剩余尺寸
-
是给子盒子添加这个属性
4.圣杯布局
- 所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。
-
核心思路：(1)两侧盒子写固定大小(2) 中间盒子 flex: 1; 沾满剩余空间
6.注意
1. 在flex眼中，标签不再分类
-
简单说就是没有块级元素，行内元素和行内块元素
-
任何一个元素都可以直接给宽度和高度一行显示
2. Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动
3.当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端
则不用考虑直接flex
7.主轴方向
1.目标:使用flex-direction改变元素排列方向
2.主轴默认是水平方向, 侧轴默认是垂直方向
3.修改主轴方向属性: flex-direction
属性值 |
作用 |
| row |
行, 水平(默认值)
|
|
column
|
列, 垂直
|
|
row-reverse
|
行, 从右向左
|
|
column-reverse
|
列, 从下向上
|
8.弹性盒子换行
1. 弹性盒子换行显示 : flex-wrap: wrap;
2.调整行对齐方式 ：align-content
-
取值与 justify-content基本相同
本文含有隐藏内容，请 开通VIP 后查看