第十二章:移动端流式布局
11.1:视口
**视口(viewport)**就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
-
布局视口(layout viewport)
- 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期PC端页面在手机上显示的问题。
- IOS,Android 基本都将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。
-
视觉视口(visual viewport)
- 字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
- 我们可以通过缩放去操作视觉视口,但不好影响布局视口,布局视口仍保持原来的宽度。
-
理想视口(ideal viewport)
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定。
- 理想视口,对设备来讲,是最理想的视口尺寸。
- 需要手动添写meat视口标签通知浏览器操作。
- meat视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有宽,我们布局的视口就多宽。
-
meat视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
属性 解释说明 width 宽度设置的是viewport宽度,可以设置device-width特殊值 initial-scale 初始缩放比,大于0的数字 maximum-scale 最大缩放比,大约0的数字 minimum-scale 最小缩放比,大于0的数字 user-scalable 用户是可以可以缩放,yes或no
11.2:二倍图
-
物理像素&物理像素比
- 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。
- 我们开发时候的1px不是一定等于1个物理像素的。
- PC端页面,1px等于1个物理像素的,但是移动端就不尽相同。
- 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比。
-
背景缩放
background-size
background-size
属性规定背景图像的尺寸。background-size: 背景图片宽度 背景图片高度;
- 单位:长度| 百分比| cover| contain
cover
:等比例拉伸,要完全覆盖div盒子,可能有部分背景图片显示不全contain
:高度和宽度等比例拉伸,当宽度或者高度铺满div盒子就不再进行拉伸了,可能有空白区域。
11.3:移动端开发选择
-
单独制作移动端页面(主流)
通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。
-
响应式页面兼容移动端(其次)
通过判断屏幕宽度来改变样式,以适应不同终端。
缺点:制作麻烦,需要花很大精力去调兼容性问题。
11.4:流式布局(百分比布局)
- 流式布局,就是百分比布局,也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
- 流式布局方式是移动web开发使用的比较常见的布局方式。
max-width
(最大宽度)、max-height
(最大高度)min-width
(最小宽度)、min-height
(最小高度)
第十三章:flex布局
13.1:flex布局原理
flex
是flexible Box
的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定flex布局。
- 当我们为父盒子设为
flex
布局以后,子元素的float
、clear
和vertical-align
属性将失效。 - 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。
- 子容器可以横向排列也可以纵向排列
13.2:flex布局父项常见属性
以下由6个属性是对父元素设置的。
-
flex-direction
:设置主轴的方向-
主轴和侧轴
在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴。
- 默认主轴就是x轴方向,水平向右。
- 默认侧轴就是y轴方向,水平向下。
-
属性值
flex-direction
属性决定主轴的方向(即项目的排列方向)属性值 说明 row 默认值,从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上 注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。
-
-
justify-content
设置主轴上的子元素排序方式justify-content
属性定义了项目在主轴上的对齐方式属性值 说明 flex-start 默认值,从头部开始,如果主轴是x轴,则从左到右 flex-end 从尾部开始排列 center 在主轴居中对齐(如果主轴是x轴则水平居中) space-around 平分剩余空间 space-between 先两边贴边,在平分剩余空间(重要) 注意:使用这个属性之前一定要先确定好主轴是哪个
-
flex-wrap
设置子元素是否换行默认情况下,项目都排在一条线(又称“轴线”)上。flex-wrap属性定义,flex布局中默认是不换行的。
属性值 说明 nowrap 默认值,不换行 warp 换行 -
align-items
设置侧轴上的子元素排列方式(单行)该属性时控制子项在侧轴(默认是y轴)上的排列方式在子项为单项(单行)的时候使用。
属性值 说明 flex-start 从上到下 flex-end 从下到上 center 挤在一起居中(垂直居中) stretch 拉伸(默认值) -
algin-content
设置侧轴上的子元素的排列方式(多行)设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行),在单行下是没有效果的。
属性值 说明 flex-start 默认值在侧轴的头步开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴中间显示 space-around 子项在侧轴平分剩余空间 space-between 子项在侧轴先分在两头,在平分剩余空间 stretch 设置子项元素高度平分父元素高度 -
align-content
和align-items
区别align-items
适用于单行情况下,只有上对齐、下对其、居中和拉伸。align-content
适用于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对其、居中、拉伸以及平均分配剩余空间等属性值。
-
flex-flow
flex-flow
属性是flex-direction
和flex-warp
属性的复合属性。flex-flow: row warp;
13.3:flex布局子项常见属性
-
flex
属性flex
属性定义子项目分配剩余空间,用flex
来表示占多少分数。.item { flex: <number>; /* default 0 */ }
-
align-self
控制子项自己在侧轴上的排列方式align-self
属性允许单个项目与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为
auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。span:nth-child(2) { align-self: flex-end; }
-
order
属性定义项目的排列顺序数值越小,排列越靠前,默认为0。
注意:和
z-index
不一样。.item { order: <number>; }