1. 移动布局

2. 视口 viewport

2.1. 布局视口 layout viewport

布局视口分辨率设置为980px,但一般元素很小,可以通过手动缩放网页

2.2. 视觉视口 visual viewport

我们可以通过缩放来操作视觉视口,但不会影响布局视口

2.3. 理想视口 ideal viewport

通过meta视口标签,告知网页,设备有多宽网页有多宽

3. meta视口标签

  1.  <meta
  2.       name="viewport"
  3.       content="width=device-width, initial-scale=1.0,user-scalable=no,maxium-scale=1.0,minimum-scale=1.0"
  4.     />
  • width: 宽度设置是viewport宽度,特殊值为device-width 宽度为设备宽度
  • initial-scale: 初始缩放比 大于0的值
  • maximum-scale:最大缩放比 默认为1
  • minimum-scale:最小缩放比 默认为1
  • user-scaleable:用户是否可以缩放,yes或no (1或0)

4. 二倍图

pc端1px为1个物理像素

而手机一般都为1px为2个物理像素

一般移动端都给一个2X再给一个1倍的盒子装

5. 背景缩放 background-size

background-size: 背景图片的宽度 高度;

  • 如只写一个参数会等比例缩放
  • 里面可以写百分百,相当于父盒子的尺寸
  • cover:把图扩展到足够大直到填满盒子,等比缩放,会丢失部分图像
  • contain:拉伸到高或宽直到填满高或宽就停止拉伸,可能会有部分空白图像无法填充
  • 移动端的2X图一般用一个1X的盒子装,缩小到1X放置到背景

6. 移动端 CSS初始化

http://necolas.github.io/normalize.css/

7. CSS3 盒子模型 box-sizing

box-sizing:border-box; 把传统盒子转为CSS3盒子

传统盒子 = width +border +padding 的值

CSS3盒子 = padding和border不会影响盒子大小

8. 移动端特殊样式

如:移动端转为css3模型

box-sizing:border-box;

-webkit-box-sizing:border-box;

a标准在移动端点击会有高亮提示,我需要清除

-webkit-tap-highlight-color:transparent;

清除ios的按钮样式

-webkit-appearance:none;

禁止长按弹出菜单

img,a {

  1. -webkit-touch-callout:none;

}

9. 移动端技术选型

  • 单独制作移动端页面

    • 流式布局(百分百布局)

      • max-width:最大宽度 或 max-height
      • min-width:最小宽度 或min-height
    • flex 弹性布局
    • less+rem+媒体查询布局
    • 混合布局

  • 响应式页面兼容移动端

    • 媒体查询
    • botstarp

10. flex布局

当父盒子设为flex布局后,子元素的float、clear和vertical-align属性失效

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

10.1. 父项属性

10.1.1. flex-direction:设置主轴的方向

07. 移动布局 - 图1

主轴与侧轴 x轴和y轴

  • row:(默认值) 从左到右 默认主轴为x 侧轴为y 子元素是跟着主轴来排列的

      1. display: flex;
      2. flex-direction: row;

  • row-reverse:从右到左

  • column:从上到下 主轴为y 侧轴为x

      1. display: flex;
      2. flex-direction: column; /* 将主轴设置为y轴 元素从上到下排列 */
  • column-revers:从下到上

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

使用这个属性前一定要确认好主轴是哪个

  • flex-start:(默认值) 从头部开始排列 如果主轴是x轴,则从左到右

  • flex-end: 从尾部开始排列

  • center:在主轴居中对齐 (如果主轴x轴则是水平居中)

  • space-around:平分剩余空间

      1. display: flex;
      2. justify-content: space-around; /* 将父盒子平均切分给n个子盒子的空间 */
  • 07. 移动布局 - 图2

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

    • 07. 移动布局 - 图3

10.1.3. flex-wrap:设置子元素是否换行

默认情况下,项目都是在轴线上.由flex-wrap定义,默认不换行,如果装不开,会缩小 子元素宽度,加入到轴线上排列

  • nowarp:(默认值) 不换行

  • warp:换行,当父盒子装不下后,自动换行

      1. display: flex;
      2. flex-wrap: wawrp; /* 子元素需要先设置大小才会换行 不然会自动分配大小 */

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

  • flex-start: 默认值 从上到下
  • flex-end:从下到上
  • center:挤在一起居中(垂直居中)
  • stretch:拉伸 (子盒子不要给高度,不然没效果)

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

要配合flex-wrap:warp 使用,不然flex项目无法多行排列

  • flex-start: 默认值 在侧轴的头到尾排列
  • flex-end:尾到头排列
  • center:在侧轴中间排列
  • space-around:子项在侧轴平分剩余空间
  • space-between:子项在侧轴先在头和尾,再平分剩余空间
  • stretch:设置子项元高度平分父元素高度

10.1.6. flex-flow 简写属性

可以将设置主轴与是否换行进行简写

如:flex-flow: column warp;

10.2. 子项属性

10.2.1. flex 属性

定义子项分配剩余空间,占多少份

flex: n; 默认为0 如:flex:2;

也可以写百分百 为父盒子大小的多少

如:flex:20%;

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

让子项单独自己一个排列方式

继承侧轴上的排序方式属性

  • flex-start: 默认值 从上到下
  • flex-end:从下到上
  • center:挤在一起居中(垂直居中)
  • stretch:拉伸 (子盒子不要给高度,不然没效果)

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

数值越小,排名越靠前,默认值为0

order:n; 可以为负数 如:order:-1;

11. rem布局

flex缺陷:文字和高度无法自适应 因为是按父盒子切份来分配的 而rem可以更好自适应文字和高度

em相对应父元素 的字体大小 来等比缩放 font-size =12 px; 10em =120px 1em =12px;

rem 相对应根元素(html) 设置font-size=12px ; 10rem=120px 1rem=12px

rem的优点就是通过修改html里面的文字大小来

rem 配合媒体查询 修改html中font-size 大小

11.1. 媒体查询

@media 媒体类型 关键字 (媒体特征) { 

  1. CSS-Code;

}

  • 媒体类型

    • all:用于所以设备
    • print:用户打印和打印预览
    • screen:用于电脑屏幕,平板电脑,智能手机等

  • 关键字

    • and:可将多个媒体特性连接到一起
    • not:排除某个媒体类型
    • onle:指定某个媒体类型

  • 媒体特性

    • width:页面可见宽度
    • min-width:页面最小可见区域宽度
    • max-width:最大可见区域宽度
  1. @media screen and print (max-width:800px){
  2.     body {
  3.         /*当max-width小于等于800时 背景颜色为粉色*/
  4.         background-color:pink;
  6.     }
  7. }

11.2. rem和结合媒体查询

rem单位是跟着html变化的 媒体查询+rem 就可以实现不同设备宽度 实现自适应

  1. @media screen and (min-width:320px){
  2.     html {
  3.         font-size: 50px;
  4.     }
  5. }
  6. @media screen and (min-width:640px){
  7.     html {
  8.         font-size: 100px;
  9.     }
  10. }
  11. .div{
  12.     height: 1rem;
  13.     font-size: .5rem;
  14.     background-color: green;
  15. }

11.3. px转rem插件

vscode下载px to rem & rpx (cssrem)

11.4. 引入资源

当我们样式比较多 我们可以针对不同的设备使用不同的css文件

根据link中判断设备的尺寸 引用不同的css文件

  1. <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
  2. <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

12. Less

Less 是 一门 css 扩展语言 是CSS的预处理器

常见的CSS预处理器: Sass Less Stylus

12.1. Less 安装

node.js环境下

先安装node.js

  1. npm install -g less
  2. lessc -v

浏览器环境使用

  1. <link rel="stylesheet/less" type="text/css" href="styles.less" />
  2. <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

12.2. Less 变量

必须@为前缀 不能包含特殊字符 不能以数字开头 大小写敏感

  1. /* @变量名:值 */
  2. @color: pink;
  3. @font14: 14px;
  4. body {
  5.     background-color: @color; /* 使用变量 */
  6.     font-size: @font14;
  7. }

12.3. Less编译

我们需要把我们的less文件编译成css文件 才能在页面中使用

我们可以在vscoe中下载 Easy LESS插件 保存less文件后自动生成css文件

12.4. Less嵌套

Less中可以进行嵌套选择器 可以减少我们重复书写后代类选择器父类的名称

后代选择器

  1. .div{
  2.     width: 200px
  3.         a{
  4.             color: red;
  5.             }
  6. }

伪类 交集选择器 伪元素选择器 我们需要在前面加上&拼接

伪类选择器

  1. a{
  2.     color: red;
  3.     &:hover{
  4.         color: blue;
  5.     }
  6. }

伪元素

  1. a{
  2.     color: red;
  3.     &::before{
  4.         content: "";
  5.     }
  6. }

12.5. Less运算

任何数字 颜色 或 变量都可以参与四则运算

  1. @font14: 14px;
  2. body {
  3.     background-color: #666 - #222;
  4.     font-size:(@font14 + 5) / 2;
  5.     width: 1.6rem + 5px; /* 如果两个数单位不相同 结果以第一数的单位为准  */
  6. }

12.6. Less导入其他less

导入common.less

  1. @import 'common'