移动web

移动web

理想视口的标准写法 是 五个值 必须要有的

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

4个基础的移动端布局

1、百分比布局 – 流式布局

2、flex布局 – 一点点难度 属性和值 太多了

父盒子的 6个重点 子盒子 3个 有一个重点

3、rem + 媒体查询 讲道理来说 难度不大 分成的份数

4、响应式布局 bootstrap – 用的比较少 后期发展的一个趋势

小程序 — 免安装的 缺点：小程序 只能玩 小容量的程序

5、混合布局 就是把前边四个混合起来实现页面效果的 这是经常使用的

设计稿是 750px

开发尺寸是 375px

所以是一个2倍的关系

​ 在设计稿里边去测量的时候 宽度需要除以2 然后写在 开发里边的

​ 后期显示到手机上 还是 750px

​ 如果： 测量是100 写开发100 显示出来就是200

​ 测量是100 写开发50 显示出来就是100

​ 图 都是要进行 缩放的根据倍图的关系

​ 400 * 400 200 * 200

​ rem布局的时候 这个问题 就解决了！ 量出来多少 就写多少

背景缩放background-size

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

具体的像素 一个是宽度 一个是高度 如果给一个那么是宽度 高度会进行 等比例缩放

​

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 (一定充满盒子 但是不一定显示全)

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域(一定显示全，但是不一定充满盒子)

​ 百分比

​ 相对于谁的？ 相对于自己所在的盒子

移动端常见布局

移动端单独制作

• 流式布局（百分比布局）
• flex 弹性布局（强烈推荐）
• less+rem+媒体查询布局
• 混合布局

响应式

• 媒体查询
• bootstarp

流式布局：

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

流式布局方式是移动web开发使用的比较常见的布局方式。

1.百分比布局 – 流式布局

2.flex 弹性布局（强烈推荐）display：flex

以下由6个属性是对父元素设置的

1.flex-direction：设置主轴的方向 ：l默认主轴方向就是 x 轴方向，水平向右

​ l默认侧轴方向就是 y 轴方向，水平向下

row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

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

flex-start	默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则 水平居中）
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间（重要）

3.flex-wrap：设置子元素是否换行

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

nowrap	默认值，不换行
wrap	换行

4.align-items：设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

flex-start	默认值 从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸

5.lalign-content：设置侧轴上的子元素的排列方式 换行以及（多行）

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的

注意！！！单行找align-items 多行找 align-content

flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

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

可以合写flex-flow:row wrap;

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

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

span:nth-child(2) {

      /* 设置自己在侧轴上的排列方式 */

      align-self: flex-end;

 }

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

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

.item {
    order: -1;
}

3.移动开发rem布局

1. em相对于父元素 的字体大小来说的

width: 10em

2.rem 相对于 html元素 字体大小来说的

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

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

1. mediatype 查询类型

all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

基本语法结构

媒体查询

media 媒体查询 and前后必须有 空格！

​ 条件 写完不能加分号！

​ @media screen and (条件) {

​ 写具体的在这个条件下 要有的效果

​ }

 @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }
        
        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }

/* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */

/* max-width 小于等于800 */

/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */

我们的数字后面必须跟单位 800px 这个 px 不能省略的

引入资源

/* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 */

​ /* 当我们屏幕小于640 我们让div一行显示一个 */

​ /* 一个建议： 我们媒体查询最好的方法是从小到大 */

​ /* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */

创建一个style320.css和一个style640.css然后用html调用这两个css 如下：

less

less.less文件会自动保存生成less.css

1.less的嵌套

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 1. less嵌套 子元素的样式直接写到父元素里面就好了
    a {
        color: red;
        // 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
        &:hover {
            color: blue;
        }
    }
}
.nav {
    .logo {
        color: green;
    }
    &::before {
        content: "";
    }
}

2.less的运算

// 1. 我们运算符的左右两侧必须敲一个空格隔开

// 2. 两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准

// 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准

@baseFont: 50px;
html {
    font-size: @baseFont;
}
@border: 5px + 5;
div {
    width: 200px - 50;
    height: (200px + 50px ) * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / @baseFont;
}

rem 元素大小取值方法

①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

②屏幕宽度/划分的份数就是 htmlfont-size 的大小

③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

设置公共common.less文件

• 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
• 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
• 划分的份数我们定为 15等份
• 因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为 50px，注意这句话写到最上面

// 设置常见的屏幕尺寸 修改里面的html文字大小
a {
    text-decoration: none;
}
// 一定要写到最上面
html {
    font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @no;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @no;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @no;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @no;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @no;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @no;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @no;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @no;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @no;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @no;
    }
}

然后把公共样式common.less引入到首页样式index.less文件里，在吧index.css文件引入到index.html。

// 首页的样式less文件

@import “common”;

// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面

// link 是把一个 样式文件引入到 html页面里面

less 移动端 用了一下 后边又不用了

​ 1、可以使用变量

​ 2、可以进行嵌套

​ 3、可以进行运算

​ css 用

​ 没有变量

​ 不能嵌套

​ 不能运算 – calc() 这个方法是一个特例

rem 适配方案

1. 两种方案现在都存在。
2. 方案2 更简单，现阶段大家无需了解里面的js代码。

方案1：

less

媒体查询

rem

如上less部分 苏宁易购页面的制作

方案2：

flexible.js

rem

方案2：我们采取单独制作移动页面方案

技术：布局采取rem适配布局2（flexible.js + rem）

设计图： 本设计图采用 750px 设计尺寸

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

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

我们页面需要引入这个js文件

 在 index.html 中 引入 flexible.js 这个文件
<script src=“js/flexible.js”> </script>

4.开发之响应式布局

中文官网：http://www.bootcss.com/

官网：http://getbootstrap.com/

推荐使用：http://bootstrap.css88.com/

2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。

3.x.x：目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。

4.x.x：最新版，目前还不是很流行

Bootstrap 栅格系统

	超小屏幕（手机） < 768px	小屏设备（平板） >=768px	中等屏幕（桌面显示器） >=992px	宽屏设备（大桌面显示器） >=1200px
.container 最大宽度	自动(100%)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12

列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*
元素内。

<!--列嵌套 -->

 <div class="col-sm-4">

    <div class="row">

         <divclass="col-sm-6">小列</div>

         <div class="col-sm-6">小列</div>

    </div>

</div>

列偏移

 <!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

列排列

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序

 <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左侧</div>
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
  </div>

响应式工具

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面 (≥992px)	大屏幕桌面 (≥1200px)
.visible-xs-*	可见	隐藏	隐藏	隐藏
.visible-sm-*	隐藏	可见	隐藏	隐藏
.visible-md-*	隐藏	隐藏	可见	隐藏
.visible-lg-*	隐藏	隐藏	隐藏	可见