移动端开发（流式、flex、rem、Bootstrap）

最新推荐文章于 2022-06-22 19:15:33 发布

一麻袋小猫

最新推荐文章于 2022-06-22 19:15:33 发布

阅读量657

点赞数

分类专栏：移动端开发

本文链接：https://blog.csdn.net/Zmongo/article/details/104275339

版权

移动端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

移动端主流方案

1.单独制作移动端页面（主流）
通常根据设备判断，经常在网址域名前面加m(moble)可以打开移动端，如果是移动设备打开，则跳到移动端页面

京东手机版
淘宝触屏版
苏宁易购手机版
2.响应式页面兼容移动端（其次）
通过判断屏幕宽度来改变样式，以适应不同终端
缺点：制作麻烦，需要花费很大精力去调兼容性问题

三星手机官网
3.移动端浏览器
移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题
我们可以放心使用H5标签和CSS3样式
同时我们浏览器的私有前缀我们只需要考虑添加webkit即可
4.CSS3盒子模型
传统模式宽度计算：盒子的宽度=CSS中设置的width+border+padding
CSS3盒子模型：盒子的宽度=CSS中设置的宽度width里面包含了border和padding也就是说，CSS3中的盒子模型，padding和border不会撑大盒子

要想盒子变成CSS3，就加一句 box-sizing: border-box;

  div {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 10px solid blue;
        }

移动端可以全部用CSS3盒子模型
PC端如果完全需要兼容，就不用传统模式，如果不考虑兼容，就选择CSS3盒子模型

特殊样式
1.点击高亮我们需要清除设置为transparent 完成透明

-webkit-tap-highlight-color: transparent;

2.在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance:none;
3.禁用长按页面时的弹出菜单
img,a {-webkit-touch-callout:none;}

移动端技术选型

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

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

2.响应式页面兼容移动端（其次）

媒体查询
bootstrap

flex布局

1.flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
2.采用Flex的元素，称为Flex容器，简称容器。它的所有子元素自动成为容器成员，称为Flex项目，简称项目。
传统布局与Flex布局的区别
传统布局：
兼容性好；布局繁琐‘局限性，不能再移动端很好的布局
flex弹性布局：
操作方便，布局极为简单，移动端应用广泛；PC端浏览器支持情况较差；IE11或更低版本，不支持或仅部分支持
flex布局父项常见属性：
flex-direction:设置主轴的方向
row 默认值从左到右
column 从上到下
justify-content（使用这个属性之前一定要确定好主轴是哪个）:设置主轴上的子元素排列方式
flex-start:从头部开始，如果主轴是x轴，则从左到右
flex-end: 从尾部开始排列
center: 在主轴居中对齐【主轴是x轴则水平居中，如果是y轴则垂直居中】
space-around:平分剩余空间
space-between:先两边贴边再平分剩余空间（重要）
flex-wrap:设置子元素是否换行
nowrap 默认值，不换行
wrap 换行
align-content:设置侧轴上的子元素排列方式（多行）
flex-start
flex-end
center
strech 拉伸
align-items:设置侧轴上的子元素排列方式（单行）
align-items和align-content的区别：
前者适用于单行情况下，只有对齐，下对齐，居中和拉伸
后者适用于换行的情况下，单行无效
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
flex布局子项常见属性

flex属性定义项目分配剩余空间，用flex来表示占多少份数。
圣杯布局就是用这种方法做的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 左右两边都固定了，剩下一分都给中间了 */
        
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2) {
            flex: 1;
            background-color: green;
        }
        
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

在这里插入图片描述
2.algin-self

  div span:nth-child(3) {
            align-self: flex-end;
        }

在这里插入图片描述
3.order 属性定义项目的排列顺序
数值越小，排列越靠前，默认为0。
注意：与z-index不一样。

下列案例的顺序改变了

 div span:nth-child(2) {
            order: -1;
        }

在这里插入图片描述
4.案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 左右两边都固定了，剩下一分都给中间了 */
        
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2) {
            flex: 1;
            background-color: green;
        }
        
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }
        
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        
        p span {
            /* 每个span占一份 */
            flex: 1;
        }
        
        p span:nth-child(2) {
            background-color: skyblue;
            display: flex;
            flex-direction: column;
        }
        
        p span:nth-child(2) span {
            flex: 1;
        }
        
        p span:nth-child(2) span:nth-child(1) {
            border-bottom: 1px solid #000;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>
           <span>a</span>
        <span>b</span>
        </span>
        <span>3</span>
    </p>
</body>

</html>

在这里插入图片描述

常见flex布局思路

在这里插入图片描述
默认主轴是x轴，把主轴设为y轴，把侧轴设为居中对齐

rem布局

在这里插入图片描述

媒体查询最好的方法是从小到大

引入资源就是针对于不同的屏幕尺寸调用不同的css文件
在这里插入图片描述

css的弊端：

CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS没有很好得到计算能力。
非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

less

Less(Learner Style Sheets的缩写) 是一门CSS扩展语言，也成为CSS预处理器
作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特征。
它在CSS语法基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
常见的CSS预处理器：Sass,Less,Stylus

Less是一门CSS预处理语言，它扩展了CSS的动态特性。
1.less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用
@变量名：值；
变量命名规范：
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

2.Less编译

Easy LESS 插件用来把less文件编译为css文件
只要保存less文件，会自动生成CSS文件

3.less嵌套,如果有伪类，交集选择器，伪元素选择器我们内层选择器的前面需要加&，如果不加&，则默认为子类

@border:5px+5;
div {
    width: 200px - 50;
    height: 200px * 2;
    border: @border solid red;
    background-color: green;
    a {
        color: blue;
    }
}

div {
  width: 150px;
  height: 400px;
  border: 10px solid red;
  background-color: green;
}
div a {
  color: blue;
}

1.Less运算
任何数字、颜色或者变量都可以参与运算
运算符的两侧要加空格，否则会出问题
两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
两个数参与运算，如果两个数都有单位，而且不一样，最后的结果以第一个单位为准。
16进制的颜色也可以加减
4.rem适配方案（！很重要，理解rem的用途）

适配目标
以前是只能让宽度根据屏幕宽度不同，高度无法设置。通过rem让一些不能等比自适应的元素，达到当设备尺寸发生变化的时候，等比例适配当前设备。通俗的说就是让页面元素等比例缩放。
怎么实现
媒体查询能检测到不同的屏幕尺寸。
使用媒体查询根据不同设备比例设置html字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
两种技术方案（两种方法目前都存在）

less + 媒体查询 + rem
（淘宝出的）flexible.js +rem (更推荐)

@border:5px+5;
div {
    width: 200px - 50;
    height: 200px * 2;
    border: @border solid red;
}

响应式布局 Bootstrap布局

1.响应式开发原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
一套页面可以针对于不同的页面进行显示。

超小屏幕（手机） <768px
小屏设备（平板） >=768px ~ <992px
中等屏幕（桌面显示器） >= 992px ~ <1200px
宽屏设备（大桌面显示器） >=1200px

2.响应式布局容器
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

3.响应式尺寸划分
超小屏幕（手机，小于768px）：设置宽度为100%
小屏幕（平板，大于等于768px）：设置宽度为750px
中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px
大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px

4.Bootstrap简介
Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap是基于HTML,CSS,JAVASCRIPT的，它简洁灵活，使得Web开大更加快捷。
5.Bootstrap基本模板注意：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 条件注释 -->
    <!--[if lt IE 9]>
        <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <!-- 解决ie9以下浏览器对css3Media Query的不识别 -->
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

Bootstrap使用
直接拿Bootstrap预先定义好的样式来使用
修改Bootstrap原来的样式，注意权重问题
学好Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

Bootstrap布局容器
1.container类
响应式的布局容器，固定宽度
超小屏幕（手机，小于768px）：设置宽度为100%
小屏幕（平板，大于等于768px）：设置宽度为750px
中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px
大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px
2.container-fluid类
流失布局容器百分百款宽度
占据全部视口的容器
适合于单独做移动端开发

Bootstrap栅格系统
栅格系统是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行与列的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
在这里插入图片描述

栅格布局

 <div class="container">
        <div class="row">
            <!-- 如果孩子的份数相加等于12 则孩子能沾满整个container的宽度 -->
            <div class="col-lg-3">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>
        <!-- 如果孩子的份数想加小于12 则占不满整个屏幕；如果大于12，则多余的一列则另起一行显示 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
    </div>

在这里插入图片描述
列嵌套

 <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 列嵌套最好加1个行 row这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
                <div class="row">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>

列偏移
在这里插入图片描述

<div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <div class="col-md-4 col-md-offset-4">右侧</div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">中间盒子</div>

        </div>
    </div>

在这里插入图片描述
列排序

<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>

在这里插入图片描述
响应式工具

 <div class="container">
        <div class="row">
            <!-- 用col-xs-3是因为无论屏幕多大 都各占3份 -->
            <div class="col-xs-3">
                <span class="visible-lg">显示</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md">消失的盒子</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>

在这里插入图片描述