移动端开发基础
- 在移动端兼容,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- 往左拉