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

标题: 移动端开发-门帅-20221124 [打印本页]

作者: I1220 时间: 2022-11-24 22:11
标题: 移动端开发-门帅-20221124
本帖最后由 I1220 于 2022-11-24 22:20 编辑

今日学习内容
一视口和多倍图
1（1）理想视口：
为了使网站在移动端有最理想的浏览和阅读宽度而设定的，对于设备来说，理想视口是最理想的视口尺存
需要手动来添加<meta>标签来进行视口的设置
meta视口标签的主要目的：布局视口=理想视口
（2）视觉视口：
是指用户正在看到的网站的区域，不影响布局视口
（3）物理像素点指的是屏幕的最小颗粒
一个px的能显示的物理像素点的个数，就叫做物理像素比或者屏幕像素比
（4）meta标签
name=“viewport”  声明设置视口的meta标签
width 宽度设置的是viewport的宽度，设置为device-width特殊值
initial-scale 初始缩放比，可以设置成大于0的数字，一般会设置为1.0 代表初始缩放比是1（没有缩放）时，就是让页面宽度和设备宽度保持一致
maximum-scale  最大的缩放比，可以设置成大于0的数字，一般我们会将其设置为1.0  代表最大缩放比例为1
minimum-scale 最小的缩放比，可以设置成大于0的数字，一般我们会将其设置为1.0  代表最小缩放比例为1
user-scalable  是否允许用户进行缩放，值可以设置为yes或者no （1或者0）
（5）多倍图
使用多倍图时，需要关注物理像素比，物理像素比是多少就使用相应的倍数来对图片进行缩放，比如iphone6的物理像素比是2，那么我们会将图片缩小两倍后放到移动端展示
2flex布局
(1)通过给父元素添加flex属性来控制子盒子的排列方式
当我们给父盒子设置为flex布局后，子元素里面的float、clear 和 vertical-align属性都将失效
(2)flex-direction  设置主轴方向
row/row-reverse
column/column-reverse
(3)justify-content 设置主轴上子元素的排列方式
flex-start
flex-end
center
space-around
space-between
两边的元素先贴边，在平分剩余空间(4)flex-wrap  设置子元素是否换行
(5)align-items 设置侧轴上子元素的排列方式（单行）
flex-start
flex-end
center
space-around
space-between
stretch
(6)align-content 设置侧轴上的子元素的排列方式（多行）
flex-start
flex-end
center
space-around
space-between
stretch 将子元素高度拉伸至父元素高度{前提是，子元素未设置高度}

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