移动端开发基础
- 在移动端兼容，css3只需要加webkit前缀即可
- 手机屏幕的不同，让页面在不同手机屏幕中进行适配，宽度自适应，基于手机 全屏进行布局
- 流式布局(百分比)是宽度自适应，高度固定，随着浏览器窗体大小而变化，效果不是特别好看，但是实用啊
- 视口是移动端一个显示页面内容的屏幕区域，分为理想视口和布局视口、视觉视口
- 二倍图和三倍图操作background-size属性，等比例缩小
<meta>视口标签
<meta content="width=device-width, initial-scale=1.0 user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
- 理想视口就是我们手机屏幕有多宽，我们的布局视口就有多宽
- 移动端初始化使用normalize.css
- 移动端特殊样式
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
*{
-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input{
-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
- 经典的流式布局结构:
左侧固定，右侧自适应
右侧固定，左侧自适应
两侧固定，中间自适应（圣杯布局，双飞翼布局）
等分布局
-
max-width 最大宽度(max-height最大高度)
min-width最小宽度（min-height最小高度） -
注意：如果是定位的元素，则是相对最近的定位父级元素
-
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性
-
flex布局属性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- flex-direction属性决定主轴的方向（即项目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- flex-wrap属性定义，如果一条轴线排不下，如何换行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
- justify-content属性定义了项目在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- align-items属性定义项目在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
- order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
- 二倍精灵图做法
- 在FW里面把精灵图等比例缩小为原来的一半
- 之后根据新的大小，测算坐标
- background-size为原来宽度的一半
-
使用京东DPG图片压缩技术，压缩后的图片和webp清晰度没有差距
-
通过给父盒子添加Flex属性，来控制子盒子的位置和排列方式
-
flex属性定义子项目分配父盒子的剩余空间
-
align-self控制子项目自己在侧轴上的排列方式：默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等于stretch
-
rem是一个相对单位，类似于em，em是相对于父元素字体大小
-
rem的基准是相对于html元素大小
-
媒体查询：用@media开头，注意@符号,mediatype媒体类型,关键字 and only not,media feature 媒体特性
@media mediatype and|not|noly (media feature) -
媒体类型描述设备的一般类别。除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。
-
less变量@变量名：值
-
less编译，vscode插件easy less，使用cmd命令“lessc style.less>style.css
-
less嵌套：没有&解析为父元素的后代,使用&符号，被解析为父元素自身或父元素的伪类
-
less运算，对于两个不同单位值之间的运算，运算结果的值取第一个的单位，运算符中间左右用空格隔开
-
页面元素的的rem值 = 页面元素值 / html font-size 字体大小
-
flexible.js不同移动终端的适配方案
-
Bootstrap框架container类响应式布局容器，大屏>=1200px,中屏>=992px，小屏>=768px，超小屏100%,container-fluid类：流式布局容器，百分百宽度，占据全部视口容器，适合移动端页面开发
-
Bootstrap栅格系统.col-xs-份数 .col-sm-份数 .col-md-份数 .col-lg-份数
-
列嵌套：通过添加新的.row元素和一系列.col-sm-*到已存在的.col-sm-*元素内
-
列偏移：.col-md-offset-*类可以将列向右侧偏移
-
列排序：.col-md-push-往右推和.col-md-pull- 往左拉
点击咨询 