菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 移动端_宋泽_2022.11.24 [打印本页]

作者: zzz3 时间: 2022-11-25 03:24
标题: 移动端_宋泽_2022.11.24
今日学习内容：
流式布局和flex布局
兼容移动端主流的浏览器，主要关注webkit内核浏览器即可

手机屏幕的分辨率
移动端设备的屏幕尺寸非常多、碎片化比较严重
安卓设备的分辨率一般有
480x800、480x854、720x1280、1080x1920等等
ios设备的分辨率一般有
640x960、640x1136、750x1334等等
作为开发者不需要关注分辨率，我们常用的尺寸单位是px

移动端调试的方法
1.chrome DevTools的模拟手机调试
2.使用LiveSever启动网站，用手机进行访问（手机和电脑在同局域网）
3.使用外网服务器部署网站后，直接使用ip地址或者域名进行访问

视口和二倍图
视口概念：
就是浏览器显示内容的屏幕区域，视口可以分为：布局视口、视觉视口和理想视口。
布局视口
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的pc端页面在手机上的显示问题，ios和安卓一般都将其设为980px。
视觉视口
指用户正在看到的网站的区域，可以通过缩放区操作视觉视口里能看到的内容，不会影响布局视口
理想视口
对设备来说，理想视口是最理想的视口尺寸。
需要手动添加<meta>标签进行视口的设置

meta视口标签
保证布局视口和理想视口宽度一致
name="viewport"声明设置视口的meta标签
width设置的是viewport的宽，设置为device-width时，是让页面宽度等于设备宽度
initial-scale 初始缩放比例，可设置为大于0的数字，，一般设置为1.0（无缩放）
maximum-scale 最大缩放比
minimum-scale 最小缩放比
user-scalable=0 用户禁止缩放

物理像素和物理像素化
物理像素点值屏幕最小颗粒，是真是物理存在的，在设备出厂时就设置好
开发时的1px不一定等于一个物理像素
1个px能显示的物理像素的个数，就叫做物理像素比或屏幕像素比

css样式背景缩放
background-size
属性值：
长度单位、百分比、cover、contain
contain（图片缩放至盒子宽或高的一致时，停止缩放，为等比例缩放）
cover（把背景图片扩大到占满格子）

移动端开发的选择和技术方案
主流方案
1.单独制作移动端网页（主流）
2.响应式布局来制作网页
pc端移动端公用一套网页

浏览器的兼容问题
移动端的浏览器基本都是以webkit内核为主
移动端里我们可以放心区使用H5和C3的样式
同时我们的浏览器私有前缀只需要考虑添加webkit即可

移动端常见布局
1.移动端单独制作（主流）
流式布局（百分比布局）
flex弹性布局（强烈推荐）
less+rem+媒体查询进行布局
混合布局
2.响应式布局（次要）
媒体查询
bootstrap响应式框架

流式布局

Flex布局
传统布局与Flex布局对比
传统布局
兼容比较好
布局比较繁琐
局限性，在移动端效率不高
flex布局
操作方便、布局很简单
pc端的浏览器支持情况不好
IE11或更低版本不支持flex

flex的布局原理
flex是flexible box的缩写，用来为盒装模型提供大量灵活性，任何一个容器都可以指定为flex
当我们给父盒子设为flex布局后，子元素里的float、clear、vertical-align都失效
采用flex布局的元素成为flex容器，简称容器。它里面的子元素成为flex项目，简称项目
核心：通过给父元素添加flex属性来控制盒子的排列方式

flex常见的父相属性
flex-direction
属性值：
row 默认值将x轴为主轴子元素从左到右依次排列
row-reverse 将x轴为主轴子元素从右到左依次排列
column 将y轴为主轴子元素从上到下依次排列
row-reverse 将y轴为主轴子元素从下到上依次排列

justify-content
属性值
flex-start 默认从头部开始主轴是x就左到右是y就上到下
flex-end 从尾部开始顺序还是最左边为第一个
center 子元素沿主轴进行居中对齐
space-around 子元素平分主轴上的剩余空间
space-between 先让边缘两个贴边剩下的子元素再平分中间的空间

flex-wrap 是否换行
属性值：
nowrap 默认值不换行
wrap 让子元素换行

align-items 设置侧轴上子元素的排列方式（单行）
属性值：
flex-start 从头部开始
flex-end 从尾部开始
center 从中间开始
stretch 将子项目的高度拉伸至父级高度，前提是子项没有高度

align-content （多行）
属性值：
flex-start 从头部开始
flex-end 从尾部开始
center 从中间开始
space-around 沿侧轴平分剩下空间
space-between 先贴边再分中间
stretch 侧轴子元素高度平分父元素高度

flex-flow 是flex-direction和flex-wrap 的复合属性
flex-flow column wrap
可以同时控制主轴方向和换行

flex常见的子项属性
flex子项占的份数
给子项直接设置flex：1 每一个子项都可以平分一份父相的全部空间
align-self控制子项自己在侧轴的排列方式
可以单独控制子项某一个元素，可以覆盖align-items
order属性来定义子项的排列属性（前后顺序）
数值越小，排列越靠前，默认值为0

遇到的问题:
flex写份数时出现排列问题
解决思路：
元素既可以当项目又可以当容器

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)