移动端开发

移动端开发

视口

浏览器显示的屏幕区域。视口分为布局视口，视觉视口和理想视口

布局视口：网页本身

视觉视口：手机能看的

理想视口

• 需要手动添加meta视口标签通知浏览器操作
• meta视口的主要目的是为了让宽度与理想视口的宽度一致

meta视口标签

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0>

user-scalable=no或者零

二倍图

background-size: 宽 高; /*单位可以是%和px*/

只写一个代表宽度，高度等比例拉伸

• 单位：px|%|cover|contain

  cover是完全覆盖图片

  contain宽度或者高度扑满盒子则不再进行拉伸，可能有部分空白区域

二倍精灵图做法

• 先将精灵图等比例缩放原来的一半

  background-size: 原来宽度的一半 auto;
  

• 根据大小测量坐标

移动端开发的选择

单独制作的移动端页面（主流）

• 流式布局
• flex弹性布局
• less+rem+媒体查询布局
• 混合布局

通过判断设备，打开不同的页面

响应式兼容PC移动端

• 媒体查询
• bootstarp

根据屏幕的大小自动调节

缺点：制作麻烦，需要很大的精力调兼容性问题

移动端技术解决方案

css3初始化 normalize.css

• 保护了有价值的默认值

• 修护浏览器的Bug

• 是模块化的

• 拥有详细的文档

  官方文档：http://necolas.github.io/normalize.css/

css3的盒子模型（移动端全部兼容）

box-sizing: border-box;

border和padding不会撑大盒子

移动端技术的特殊样式

-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
img,a {-webkit-touch-callout: none;}

流式布局（百分比布局）

• 通过设置盒子宽度百分比，不受固定像素的限制

设置最大和最小在一个合理的区域

max-width: max;
min-width: min;

京东案例

flex布局

容器：设置了display: flex

项目：容器的子元素就是项目

主轴：项目默认按照水平方向

传统布局和flex布局比较

传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能再移动端很好布局

flex布局

• 操作简单，布局极为简单，移动端应用广泛
• PC端浏览器支持情况较差
• IE11或者更低版本，不支持或仅部分支持

建议：

1. 如果是PC端页面布局，使用传统布局
2. 移动端或者不考虑兼容性的问题的用PC页面布局，我们建议使用flex弹性布局

布局原理

采用flex布局的元素，称为flex容器，简称“容器”。它的子元素自动成为容器的成员，称为Flex项目。

• 当我们为父盒子设为flex布局后，子元素的float,clear和vertical-align属性失效
• 伸缩布局=弹性布局=伸缩盒布局=flex布局

flex布局父项常见属性

• flex-direction:设置主轴的方向

  row 默认从左到右边

  row-reverse 从右到左

  column 从上到下

  column-reserve 从下到上

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

  flex-start 默认从头部开始

  flex-end 默认从尾部开始排列

  center 再主轴中对齐

  space-around 剩余空间再分配

  space-between 先两边填边，再平均分配剩余空间

  space-evenly

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

  nowrap 默认

  wrap 元素换行

  wrap-reverse 反方向换行

• align-content:设置侧轴上的子元素的排列方式（多行:是出现了换行的情况）

  center 挤在一起居中

  space-between

  space-around

  flex-start

  flex-end

  flex-left

  stretch 默认值 项目没有高度 拉伸至交叉轴垂直方向的高度

• align-items:设置侧轴上的子元素的排列方式（一行）

  flex-start 默认从上到下

  flex-end 从下到上

  center 挤在一起居中

  stretch 拉伸

  baseline 基线对齐

• flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

  flex-flow: row wrap;
  

flex布局子项常见属性

• flex子项目占的份数

  定义子项目分配剩余空间，用flex来表示占多少份数

  .item {
  	flex: 份数;
  }
  

• align-self 控制子项目自己再侧轴的排列方式

  允许某单个项目在侧轴不同的对齐方式

• flex-grow 1表示放大，等分剩余空间，0表示不放大（默认值） 可以取值大于等于0的数，表示的是一个比例

• flex-shrink 表示缩放 同理数值表示的是缩放的比例

• order属性定义子项的排列顺序

  默认是0，越小越靠前

rem适配方案

页面布局文字随屏幕大小的变化

rem（root em）是一个相对单位，类似与em，em是自己元素字体大小，不同的是rem是基于html元素的字体大小，比如根元素（html）设置font-size，非根元素设置width: 2rem;

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小

css3多媒体查询Media Queries

css3的新语法

• 使用@media查询可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器的大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

@media mediatype and|not|only(media feature)

• 使用@media开头
• meidatpye媒体类型 and|not|only关键字 media featur媒体特性必须又小括号

@media screen and(min-width: 320px) {
    div {
        width: 200px;
        height: 200px;
        background-color: red;
    }
}
<-- 只有屏幕宽度小于320px 则为红色-->

可以将媒体的样式单独写一个css，然后引入，这样写后不能再到里面写media属性

<link rel='stylesheet' href='#' media='screen'>

多媒体查询语句

• not：用来排除特定的设别
• only：用来规定某种特定的媒体设备
• and：要求满足所有的表达式要求，才能使用media定义样式

多媒体类型mediatpye

• all：用于所有多媒体设备
• print：用于打印机
• screen：用于电脑屏幕，平板，智能手机等
• speech：用于屏幕阅读器

媒体特性meadiafeature

• max-width：最大高度，如果超过就实现
• min-width：
• max-height：
• min-height：

注意：都是max-width: 40px 包含40px的

cass

变量

$是声明符 字母 数字下划线 - 组成（不要以数字开头）变量是可以变化的

变量的引用一个变量可以引用另外一个变量

-和_无区别

作用域

全局变量没有包含在选择器中，可以全局使用；局部变量则包含在选择器里面，只能在局部选择器中

！glabal;  // 局部变量变为全局变量

$父元素选择器

属性嵌套 同样的前缀开头，省略前缀用{}

font: {
    size: 13px;
    weight: 500;
    style: italic;
}

@import '地址'

在scss文件中引入文件

混用目的在于代码的复用

@mixin 名字(参数...)	// 定义 (可变传参)
@include	// 使用

@extend 继承

@extend .fa;

可以继承另一个选择器定义的所有样式，任何和.fa相关的组合选择器也会被.sn以组合选择器的形式继承

条件判断

@if $one > 120 {
    width: 400px;
}
@else {
    width: 500px;
}