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

标题: 陈玉-20221025-Web移动端布局 [打印本页]

作者: polaris123 时间: 2022-10-25 22:43
标题: 陈玉-20221025-Web移动端布局
一、今日学习内容
1、Web移动端流式布局和flex布局
介绍了浏览器现状、手机屏幕现状、移动端调试方法。
2、背景缩放background-size：背景图片的宽度背景图片的高度；
可用像素值或者cover、contain
3、视口
概念：视口就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
可分为：布局视口（Layout viewport）、视觉视口（Visual viewport）、理想视口（Ideal viewport）
4、meta标签
可设置width  viewport的宽度。可设置device-width的特殊值
initial-scale  初始缩放比，大于0的数字
maximum-scale  最大缩放比，大于0的数字
minimum-scale  最小缩放比，大于0的数字
user-scalable  用户是否缩放，yes或者no（1或0）
5、移动端开发选择及技术方案
5.1 移动端常见布局
（1）流式布局
概念：百分比布局，也叫做非固定像素布局
      （2）flex布局
      了解了flex布局原理：
         1.flex意思是弹性布局，任何一个盒子都可以指定为flex
         2.给父级盒子指定了flex布局后，子元素里面的float、clear和vertical-align属性都将失效。

         3.采用Flex布局的元素，称为Flex容器（flex container）简称“容器”，它的所有的子元素自动成为容器成员，叫做Flex项目（flex item）。
  flex布局父项常见属性
  （1）flex-direction：设置主轴方向
属性值有：

row 沿X轴从左到右进行排列；

row-reverse：沿X轴从右到左进行排列；

column:沿Y轴从上到下进行排列

column-reverse：沿Y轴从下到上进行排列
  （2）justify-content：设置主轴上的子元素排列方式
属性值：

flex-start：默认值，从头开始，由主轴从左到右排列；

flex-end：沿主轴从右到左排列：
center：在主轴上进行居中对齐；

space-around：所有子元素平分剩余空间；

   space-between；先让两侧盒子贴边，然后平分其余空间
  （3）flex-wrap设置子元素是否换行
属性值：
nowrap不换行（默认值）
wrap 换行
  （4）align-items 设置侧轴子元素排列方式（单行）
属性值：

flex-start：默认值，从头开始

   flex-end：从尾部开始

   center：居中显示；

stretch：拉伸
  （5）align-content：设置侧轴上子元素排列方式（多行）
属性值有：

   flex-start：默认值，从头开始

flex-end：从尾部开始

center：居中显示；

   space-around：所有子元素平分剩余空间；

   space-between；先让两侧盒子贴边，然后平分其余空间

stretch：拉伸
  （6）flex-flow符合属性
语法：flex-flow：column wrap；

  flex布局子项常见属性
  （1）align-self：控制子项自己在侧轴的排列方式
属性值有：

auto（默认值，继承父元素align-items）；

flex-start：默认值，从头开始；

flex-end：从尾部开始；

center：居中显示；

   stretch：拉伸；
   order属性定义项目的排列顺序，数值越小排位越靠前，默认0，可设置负值
  flex可控制子项占的份数
二、今日问题
今日未遇到问题

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