移动端开发45个基础点

时间:2021-1-8 作者:admin

移动端开发基础

  1. 在移动端兼容,css3只需要加webkit前缀即可
  2. 手机屏幕的不同,让页面在不同手机屏幕中进行适配,宽度自适应,基于手机 全屏进行布局
  3. 流式布局(百分比)是宽度自适应,高度固定,随着浏览器窗体大小而变化,效果不是特别好看,但是实用啊
  4. 视口是移动端一个显示页面内容的屏幕区域,分为理想视口和布局视口、视觉视口
  5. 二倍图和三倍图操作background-size属性,等比例缩小
  6. <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">

  1. 理想视口就是我们手机屏幕有多宽,我们的布局视口就有多宽
  2. 移动端初始化使用normalize.css
  3. 移动端特殊样式
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
*{
  -webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input{
  -webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
  1. 经典的流式布局结构:

左侧固定,右侧自适应
右侧固定,左侧自适应
两侧固定,中间自适应(圣杯布局,双飞翼布局)
等分布局

  1. max-width 最大宽度(max-height最大高度)
    min-width最小宽度(min-height最小高度)

  2. 注意:如果是定位的元素,则是相对最近的定位父级元素

  1. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性

  2. flex布局属性:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  1. flex-direction属性决定主轴的方向(即项目的排列方向)
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
  1. flex-wrap属性定义,如果一条轴线排不下,如何换行
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  1. flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
.box {
 flex-flow: <flex-direction> || <flex-wrap>;
}
  1. justify-content属性定义了项目在主轴上的对齐方式
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
  1. align-items属性定义项目在交叉轴上如何对齐
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  1. align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  1. order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
  2. flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
  3. flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
  4. flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
  5. flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
  6. 二倍精灵图做法
  • 在FW里面把精灵图等比例缩小为原来的一半
  • 之后根据新的大小,测算坐标
  • background-size为原来宽度的一半
  1. 使用京东DPG图片压缩技术,压缩后的图片和webp清晰度没有差距

  2. 通过给父盒子添加Flex属性,来控制子盒子的位置和排列方式

  3. flex属性定义子项目分配父盒子的剩余空间

  4. align-self控制子项目自己在侧轴上的排列方式:默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等于stretch

  5. rem是一个相对单位,类似于em,em是相对于父元素字体大小

  6. rem的基准是相对于html元素大小

  7. 媒体查询:用@media开头,注意@符号,mediatype媒体类型,关键字 and only not,media feature 媒体特性@media mediatype and|not|noly (media feature)

  8. 媒体类型描述设备的一般类别。除非使用 not 或 only 逻辑操作符,媒体类型是可选的,并且会(隐式地)应用 all 类型。

  9. less变量@变量名:值

  10. less编译,vscode插件easy less,使用cmd命令“lessc style.less>style.css

  11. less嵌套:没有&解析为父元素的后代,使用&符号,被解析为父元素自身或父元素的伪类

  12. less运算,对于两个不同单位值之间的运算,运算结果的值取第一个的单位,运算符中间左右用空格隔开

  13. 页面元素的的rem值 = 页面元素值 / html font-size 字体大小

  14. flexible.js不同移动终端的适配方案

  15. Bootstrap框架container类响应式布局容器,大屏>=1200px,中屏>=992px,小屏>=768px,超小屏100%,container-fluid类:流式布局容器,百分百宽度,占据全部视口容器,适合移动端页面开发

  16. Bootstrap栅格系统.col-xs-份数 .col-sm-份数 .col-md-份数 .col-lg-份数

  17. 列嵌套:通过添加新的.row元素和一系列.col-sm-*到已存在的.col-sm-*元素内

  18. 列偏移:.col-md-offset-*类可以将列向右侧偏移

  19. 列排序:.col-md-push-往右推和.col-md-pull- 往左拉

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。