设置侧轴上子元素排列方式_移动端基础.md

移动端web

1. 移动端基础

兼容移动端主流浏览器，处理Web内核浏览器即可

2. 视口

理想视口

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

需要手动添加meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

meta视口标签

物理像素与物理像素比

物理像素比就是屏幕的分辨率

物理像素比 1px 开发像素 = 2个物理像素

3. 二倍图

我们需要50 * 50像素(css像素)的图片， 直接放到我们的iPhone8 里面会放大2倍 100*100 就会模糊

我们采取的是 放一个100*100 图片 然后手动的把这个图片 缩小为50**50 (css像素)

我们准备的图片 比我们实际需要的大小 大2倍，这种方式就是2倍图

4. 移动端开发选择

移动端的特殊样式

点击高亮我们需要清除 设置为transparent 完成透明

-webkit-tap-highlight-color: transparent;

在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式

-webkit-appearance: none;

禁用长按页面时的弹出菜单

-webkit-touch-callout: none;

5. 移动端技术解决方案

5.1 移动端浏览器

移动端浏览器基本以webkit 内核为主，因此我们就考虑webkit兼容性问题。放心使用H5标签和CSS3样式

浏览器的私有前缀只需要添加webkit

5.2 CSS 初始化 normalize.css

Normalize.css: 保护了有价值的默认值

Normalize.css: 修复了浏览器的bug

Normalize.css: 是模块化的

Normalize.css: 拥有详细的文档

5.3 CSS3 盒子模型 box-sizing

6. 移动端常见布局

二倍精灵图做法

在firework里面把精灵图等比例缩放为原来的一半

之后根据大小测量坐标

注意代码里面background-size 也要写： 精灵图原来宽度的一半

焦点图制作

为了实现等比例缩放，焦点图宽度一定要是百分百

焦点图被搜索栏盖住，所有搜索栏一定是fixed固定定位，宽度百分百，最小宽度，最大宽度

flex 布局

布局原理

flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex 布局。

当我们为父盒子设为flex 布局以后，子元素的float、clear和 vertical-align 属性将失效。

伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局 都叫flex 布局

采用Flex 布局的元素，称为Flex 容器 (flex container)，简称“容器”。它的所有子元素自动成为容器成员，称为Flex 项目(flex item)，简称“项目”。

体验中 div 就是 flex 父容器

体验中 span 就是 子容器 flex项目

子容器可以横向排列也可以纵向排列

总结flex布局原理

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

justify-content 设置主轴子元素的排列

space-around 平分剩余的空间

space-between 先两边贴边，再平分剩余空间

align-items 设置侧轴上的子元素排列方式(单行)

align-content 设置侧轴上的子元素排列方式(多行)

flex-start

flex-end

center

space around 子项在侧轴平分剩余空间

space between 子项在侧轴先分布在两头，再平分剩余空间

stretch 设置子项元素导读平分父元素高度

flex-flow

flex-flow 属性是 flex-direction和 flex-wrap属性的复合属性

flex-direction: row;

flex-wrap: wrap;

<=> flex-flow: row wrap;

flex布局子项常见属性

flex 子项目占的份数

align-self 控制子项自己在侧轴的排列方式

order 属性定义子项的排列顺序(前后顺序)

flex属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少分数。

.item {

flex: ; /* default 0 */

}

align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0.

注意： 和 z-index不一样

携程移动端