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

标题: 王文博-20221025-移动端01 [打印本页]

作者: 博5237 时间: 2022-10-26 00:32
标题: 王文博-20221025-移动端01
一、今日学习内容
web移动端流式布局和flex布局
浏览器现状
PC端常用浏览器：360、谷歌、火狐、QQ浏览器等等
移动端常用浏览器：QQ浏览器、UC浏览器、百度手机浏览器、搜狗浏览器、谷歌浏览器等等
总结：国内的浏览器一般都是根据webkit内核修改过来的内核，所以如果要照顾兼容性，只要处理webkit内核的浏览器即可
手机屏幕现状
安卓设备的分辨率
480×800、480×854、720×1280、1080×1920等等，还有2K和4K等等
iPhone设备的分辨率
640×960、640×1336、750×1334、1242×2208等等
作为开发者，我们不需要重点关注这些分辨率，因为我们常用的单位是PX
移动端的调试方法
Chrome DevTools 谷歌模拟手机调试（常用）
直接搭建本地web服务器，手机访问即可
直接用外网服务器，用IP来进行访问
视口
概念：就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口
布局视口（layout viewport）
一般移动端的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题，基本这个视口的分辨率是980px，所以PC端页面大多都在手机上呈现，但是元素看上去非常小，可以手动进行缩放
视觉视口（visual viewport）
用户看到的网站的区域，操作视觉视口，不会影响布局视口
理想视口（idel viewport）
为了使网站在移动端有最理想的浏览和阅读宽度而设定的
理想视口是设备最理想的视口尺寸
需要是用meta视口标签，来通知浏览器进行操作
理想视口就是将布局视口的宽度修改为视觉视口的宽度
meta标签
物理像素和物理像素比
物理像素点值的是屏幕显示的最小颗粒，物理上真实存在的，在设备出厂是就设置好的，比如：iPhone6：750×1334
我们开发的时候用的是单位1px，1px不一定等于一个物理像素
物理像素比是一个px能显示的物理像素点的个数
如果把一张100×100的图片放到手机里面会按照物理像素进行缩放
物理像素比的计算方式，用设备的物理像素分辨率/开发分辨率，比如：iPhone6的屏幕尺寸是750×1334，开发尺寸是375*667，所以物理像素比是2
多倍图
对于一张50*50的图片在手机上打开按照2倍的物理像素比，会将图片放大，从而变模糊
处理方式
将一个在PC端是100*100的图片先缩小为50*50
将图片在移动端导入即可
背景缩放
属性：background-size：背景图片的宽度，背景图片的高度
单位：长度/百分比/cover/contain
使用具体像素值来进行设置宽高缩放，第一个值是宽度，第二个是高度
如果是写一个值的话那就是代表宽度
适用百分比来设置宽高缩放，是指当前盒子的宽度和高度的百分比
cover将图片等比例拉伸，扩大至可以覆盖全部当前盒子为止
contain将图片等比例拉伸，当宽度或高度铺满盒子时停止
移动端开发选择及技术方案
移动端的主流方案
1、单独制作移动端页面（主流）
通常情况下，网址前会加m（mobile）
打开设备时会自动判断，如果是PC端就会显示PC端的网站，如果是移动端设备，就会跳转到移动端页面
PC端和移动端是两套页面
2、响应式网站
是PC端和移动端共用一套网站，在不同屏幕下，网页的样式会自动进行适配
例如：三星官网
移动端的技术解决方案
1、移动端的浏览器兼容问题
国内的浏览器基本上都是以webkit为主，因此只考虑webkit的兼容性即可
我们可以放心使用HTML和CSS3
2、移动端的公共样式
推荐使用normalize.css
优点：保护了有价值的默认值
修复了一部分浏览器的bug
模块化的
拥有详细的文档
下载网址：
将代码复制如normalize.css文件中
3、可以大量使用CSS3的盒子模型
如果PC端要多浏览器完全兼容，就用传统模式，如果不考虑兼容，或在移动端使用，就可以直接是css3的盒子模型，也就是box-sizing:border-box;
4、移动端的特殊样式
移动端的常见布局
1、移动端单独制作（主流）
流式布局
flex弹性布局
less+rem+媒体查询
混合布局
2、响应式布局（次要）
媒体查询
Bootstrap
流式布局
概念：就是百分比布局，也叫非固定像素布局
通过对盒子的宽度进行百分比设置来达到根据屏幕的宽度进行响应拉伸的目的，不收固定像素的限制
flex布局
传统布局和flex布局的对比
传统布局
兼容性好、布局繁琐、局限性（不能在移动端进行很好的布局）
flex布局
操作方便、布局简单、移动端应用广泛
PC端有一定的兼容性问题，但大部分PC端浏览器也支持flex布局的
IE11以下不支持flex
建议：如果是PC端页面布局，最好采用传统方式
如果是移动端或者不考虑PC端兼容性的，也都可以采用flex进行布局
flex布局原理
flex意思是弹性布局，任何一种盒子都可以指定flex
当我们给父级盒子指定了flex布局后，子元素里面的float、clear和vertical-align属性都将失效
采用flex布局的元素，称为flex容器（flex container）简称“容器”，他的所有子元素自动称为容器成员，叫做flex项目（flex item），简称“项目”
flex布局父项常见属性
flex-direction：设置主轴的方向
在flex布局中分为X轴和Y轴，默认的主轴是X轴，也就是水平向右，也可以设置为Y轴，也就是垂直向下
注意：主轴和测周是会发生变化的，当设置X轴为主轴，那么Y轴为轴，反之亦然
属性值
row：沿X轴从左到右进行排列（默认值）
row-reverse：沿X轴从右到左进行排列
column：沿Y轴从上到下进行排列（默认值）
column-reverse：沿Y轴从下到上进行排列
justify-content：设置主轴上的子元素排列方式
flex-start：默认值，从头开始，如果主轴是X轴就是从左到右
flex-end：沿主轴的尾部进行排列
center：在主轴上进行居中对齐（如果主轴是X就代表水平居中）
space-around：所有子项评分剩余空间
space-between：先让两侧的盒子贴边，然后平分剩余空间
flex-wrap：设置子元素是否换行
默认情况下，项目都在一条线，不进行换行操作
属性值
nowrap：不换行（默认值）
wrap：换行
align-items：设置侧轴上的子元素的排列方式（单行）
注意：要在侧轴子项是单行的时候用
属性值：
flex-strat：从头开始
flex-end：从结尾开始
center：居中显示
stretch：拉伸
align-content：设置侧轴上的子元素排列方式（多行）
设置子项在侧轴的排列方式，只能用于多行子项的情况（子项换行时），单行是没有效果的
属性值：
flex-start：从头开始
flex-end：从尾部开始
center：居中显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先两侧贴边，然后平分剩余空间
stretch：拉伸
align-items和align-content的区分
align-items：适用于单行情况下，只有上对齐，下对齐，居中和拉伸
align-content：适用于多行的情况下（单行无效），可以设置上对齐、下对齐、居中、拉伸以及平分剩余属性
单行找align-items
多行找align-content
flex-flow复合属性
是flex-direction和flow-wrap的复合属性
例：可以同时设置主轴方向和是否换行
flex布局子项常见属性
align-self：控制子项自己在侧轴上的排列方式
默认是auto，表示继承父元素的align-items属性，如果自己有align-self，就用自己的属性
属性值：
flex-strat：从头开始
flex-end：从结尾开始
center：居中显示
stretch：拉伸
order属性定位项目的排列顺序
数值越小排位越前，默认为0
注意：不要和z-index混淆
flex来控制子项站的份数
注意：一个盒子可以同时是容器和项目（套娃）
如果子项有自己的宽度，那么其他子项flex:1；就代表将剩余部分平分

二、遇到问题

三、解决方案

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