移动WEB开发笔记

vertical-align: middle;设置图片居中

移动WEB开发

视口viewport（显示网页的屏幕区域）

布局视口 layout viewport 字太小，手动缩放网页

视觉视口 visual viewport 左右滑动看

理想视口 ideal viewport

理想视口

物理像素 /物理像素比（DPR）

物理像素 ：屏幕显示的最小颗粒 屏幕分辨率

物理像素比：1px能显示的物理像素点的个数

背景缩放background-size

background-size：宽度 高度；

background-size：宽度；高度等比缩放

background-size：百分比；相对父盒子来说

background-size：contain；一个边顶满盒子，就不在缩放，可能留白/等比缩放

background-size：cover；两个边全部顶满，完全覆盖盒子，可能显示不全/等比缩放

css3移动端盒子模型

box-sizing: border-box;

padding 和border不会撑开盒子

清除高亮：

tap-highlight-color：transparent；

按钮外观亮光效果：

appearance：none；

禁用长时间按页面弹出菜单：

touch-callout：none；

背景渐变

background：-webkit-linear-gradient

移动端开发选择

1.单独制作移动端页面

• 流式布局（百分比布局）

  宽度设置为百分比

  最大宽度 max-width

  最小宽度 min-width

• flex弹性布局（强烈推荐）

  display：flex；加给亲父亲

  父元素属性

  flex-direction：设置主轴方向 row/column

  flex-wrap：wrap（换行）/nowrap（默认不换行）

  flex-flow：简写

  主轴方向-/子元素是否换行

  justify-content：设置主轴上子元素的排列方式

  flex-start（默认从左到右）/flex-end（从右往左）/center（中间）/space-around（平分剩余空间）/ space-between（两边贴边，中间平均分配）

  align-items设置侧轴上子元素排列方式（只对单行有效）

  flex-start（默认从左到右）/flex-end（从右往左）/center（中间）/stretch（拉伸）

  align-content：设置侧轴上子元素排列方式（针对多行有效）

  flex-start（默认从左到右）/flex-end（从右往左）/center（中间）/space-around（平分剩余空间）/ space-between（两边贴边，中间平均分配）stretch（拉伸）

  子元素属性

  flex：数字； 分配制定子元素在父元素剩余空间中的比例

  align-self：控制子元素里面的单独一个；

  order：左右顺序，默认为0，越小越靠左；

• less+rem+媒体查询布局

  导入less样式

  @import “common”；

   

  rem

  em相对于父元素的字体大小来算

  rem相对于html元素的字体大小来算

  优点：

  可以通过修改html里面的字体大小，整体控制页面中元素大小（宽高，边距，字体大小）。

  媒体查询（media query）

  @media screen and (max-width: 800px) {

  样式代码

  }

  检测屏幕的尺寸，设置不同的样式

  引入资源：针对不同的屏幕尺寸，调用不同的css文件

   

  less css的预处理语言

  变量

  @变量名：值；区分大小写

  使用时带上@；

  嵌套

  1.子元素样式直接写在父元素里面；

  2.伪类/伪元素 前面添加&；

  运算

  运算符左右空格隔开；

  如果两个单位参与运算，以第一个单位为准；

• 混合布局

  • rem + 媒体查询 + less技术

  • flexible.js + rem

    引入js文件

    body中声明：

    min-width: 320px;

    max-width: 750px;

    width: 10rem;

    方便开发查看效果，写入媒体查询

    @media screen and (min-width: 750px) {

    html {

    font-size: 75px!important;

    }

    }

2.响应式页面兼容移动端 Responsive

一套页面可以适配PC端（container）和移动端（container-fluid）

应用场景：适合简单的页面

响应式布局容器：（版心）container

• 媒体查询

  手机 <768 width=100%

  平板 >=768·992 width=750px

  桌面显示器 >=992-1200 width=970px

  大桌面显示器 >=1200 width=1170px

• bootstarp（框架）

  偏向用于开发响应式布局、移动设备优先的 WEB 项目。

  栅格系统（container容器中）

  每一列左右默认15px的内边距

  xs/sm/md/lg

  列嵌套：加一个row，取消父盒子的padding，高度也设置和父盒子一样

  列偏移：

  col-md-offset-份数

  列排序：

  col-md-push-份数 从左往右

  col-md-pull-份数 从右往左

  响应式工具类：

  hidden-屏幕类型（xs/sm/md/lg）

  visible-屏幕类型（xs/sm/md/lg）

   

空格隔开

background（）

transform-origin（）

translate（，）

rotate（，）

scale（，）