Co-King

移动WEB开发之流式布局

web前端基础知识资料包

百度网盘

提取码：f1vz

学习目录

移动端最终需要完成一个京东页面

浏览器基础

手机屏幕现状

移动端调试方法

总结

视口

布局视口

视觉视口

理想视口

总结

meta视口标签

标准的viewport设置

最完美的写法

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

物理像素与物理像素比

二倍图

图片里面的像素太丰富了，文字一般是不会受到什么影响的

多倍图

背景缩放 background-size

二倍图以及多倍图切图

可以使用cutterman来进行切图操作

移动端开发选择

单独移动端页面

响应式兼容PC端口制作

总结

移动端技术解决方案

移动端浏览器

CSS初始化

CSS初始化官网地址

CSS3盒子模型 box-sizing

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 传统盒子模型 = width + border + padding */
        div:nth-child(1) {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid #ccc;
        }

        div:nth-child(2) {
            /* 
                box-sizing: border-box;
                有了这句话，就让盒子变成CSS3盒子模型
                padding和border不会再撑大盒子
            */
            margin-top: 10px;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid #ccc;
        }
    </style>
</head>

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

</html>

实现效果图

移动端特殊样式

可以直接复制到初始化当中去即可

移动端技术选型

移动端技术选型分为很多种，具体使用哪一种可以根据自己进了哪一家公司，公司是如何选择的即可

流式布局（百分比布局）

流式布局主要看的是宽度
可以设置最大宽度，但是里面的孩子可以自动收缩

京东移动端首页案例准备

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

最好给一个最大的宽度和一个最小的宽度 - 通过最大宽度和最小宽度来控制对页面的缩放操作

使用百分比来进行布局操作即可

二倍精灵图的做法

在firework中千万不要保存图片

图片格式

移动WEB开发之flex布局显示导读

目标

最后进行一个移动端页面的制作即可

子目录

flex布局体验

传统布局与flex布局

初体验(案例)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }

        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

实现的效果图

里面的内容随着浏览器页面的移动而自适应

flex布局原理

因为我们也讲过，float布局并不是很完美的布局

总结

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

flex布局父项常见属性

常见的父项属性

flex-direction设置主轴的方向

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

使用该属性之前一定要确定好主轴是哪一个

平分剩余空间

补充

justify-content ： space-evenly 这个属性可以使项目与项目之间以及项目与边框之间的间隔相等

先确定主轴的排列方式

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

flex布局中，默认子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面

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

想让盒子垂直居中，需要在两个轴上面都居中才行

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

针对的是多行的效果 -

align-content 和 align-items 区别

flex-flow(复合属性)

flex布局子项常见属性

flex属性

分配剩余空间

之前京东页面的书写曾经用到过

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex份数</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;
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

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

</html>

flex后面的数字其实表示的是权重，数值越大表明分配的东西越多

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

侧轴

控制盒子的位置

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

携程网首页案例制作

首页制作进行分块处理

常见的flex布局思路

背景线性渐变

之前盒子三角的做法

移动WEB开发rem适配布局导读

目标

rem单位

rem的优点

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

媒体查询

mediatype查询类型

关键字

重点

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

媒体查询案例(根据页面宽度改变背景变色）

实现思路

代码的层叠性

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            1、媒体查询一般按照从大到小或者从小到大的顺序来
        */
        /* 2、小于540px页面的背景颜色变为蓝色 */
        @media screen and(max-width:520px) {
            body {
                background-color: blue;
            }
        }

        /* 3、540~970 我们的页面改为绿色 */
        /* @media screen and (min-width:540px) and (max-width:969px) {
            body {
                background-color: green;
            }
        } */

        @media screen and (min-width:540px) {
            body {
                background-color: green;
            }
        }



        /* 4、大于等于970px 我们页面的颜色改为红色*/
        @media screen and (min-width:970px) {
            body {
                background-color: red;
            }
        }

        /* screen还有and必须带上，不能省略的 */
        /* 我们的数字后面必须要跟上单位 */
    </style>
</head>

<body>

</body>

</html>

rem实现元素动态变化

媒体查询 + rem实现元素动态大小变化

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 这么写写死了，我们要实现在不同的屏幕里，实现不同的变换 */
        /* html {
            font-size: 100px;
        } */

        /* 清楚外边距 */
        * {
            margin: 0px;
            padding: 0px;
        }

        /* 从小到大的顺序来书写 */
        @media screen and (min-width:320px) {
            html {
                font-size: 50px;
            }
        }

        /* 最小宽度定为640px */
        @media screen and (min-width:640px) {
            html {
                font-size: 100px;
            }
        }

        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="top">购物车</div>
</body>

</html>

媒体查询- 引入资源

准备两套甚至多套css样式在这里插入代码片

less基础

CSS的弊端

LESS简介以及使用变量

在CSS的基础上添加了一些东西，进行预处理动作

Less的使用

Less变量

变量是指没有固定的值，可以改变的，因为在CSS中一些颜色和数值需要经常使用

Less文件进行样式的书写

// 定义一个粉色的变量
@color:pink;
body {
    background-color: @color;
}
// 定义一个字体为14px的变量
@font14:14px;
div{
    color: @color;
    font-size:@font14;
}

Less编译

在vis中安装Easy LESS插件即可，每次保存好就可以将less文件转换成css文件

Less嵌套

上面less文件解析出来的结果

总结

特殊情况下(伪类、交集选择器、伪元素选择器)

我们内层选择器的前面要加上 &

伪元素的写法 &

伪元素写法解析的结果为：

less文件

解析成css文件

Less运算

注意点

我们运算符的左右两侧必须敲一个空格隔开
两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
两个数参与运算，如果2个数都有单位，而且不一样的单位，最后的结果以第一个单位为准

颜色用数字来表示的时候，也可以进行计算

rem适配方案

思考

答案

全部用rem作为单位，当html字体大小变化的时候，元素尺寸也会发生变化，从而达到等比例缩放的适配

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备

实现当页面尺寸发生变化的时候，等比例缩放效果

技术方案

其中技术2比较推荐一点

rem最终适配方案

方案一

一般的情况下，我们用的都是当前最流行的
动态设置html标签font-size大小

目前比较流行的设计稿是750px

元素大小的取值方法

总结的步骤

小复习

onmousewheel - 该属性只看正负不看大小

offsetWidth = content + padding + border
clientWidth = content + padding

满二叉树是一种特殊的完全二叉树

满二叉树，节点总数和树的高度呈现指数关系

强制类型转换括号是放在前面的

图 = 节点 + 边

如果图包含环的，遍历框架就要visited数组来进行辅助即可

苏宁首页案例制作

技术选型

采用750px设计尺寸

设置视口标签以及引入初始化样式

设置公共的common.less文件

苏宁移动端首页

// 首页的样式文件
// @import 导入的意思，可以把一个样式导入到另一个样式文件中
@import "common";

里面的body样式的设置

固定定位的盒子势必会有宽度

position: fixed;
// 定位的盒子通过left值等来进行定位操作， 
top: 0;
left: 50%;
transform: translateX(-50%);

在书写样式的时候，就是如此，在进行计算的时候，一定要加上括号，而且修改样式以后先保存，一定要看到css文件中计算出具体数值才行

rem适配方案2

简洁高效的rem适配方案flexible.js

有了flexible.js就不用书写媒体查询了

原理就是将当前屏幕除以 10等份即可

使用适配方案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">

引入自己的样式即可

引入文件使用script

body样式需要清楚

body {
    min-width: 320px;
    /* 一定要限定死 */
    max-width: 750px;
    /* flexible 给我们划分了 10 等份 */
    /*  */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}

划分了10等分，设计稿稿件给的是750px / 75 就是划分为10等份

插件cssrem

但是使用这个插件要根据项目来修改我们默认的html文字大小

这是一个神器的插件

有了这个插件对于前面的less的学习了解也是必要的

公开课制作黑马移动端项目

书写黑马页面

技术方案

代码规范

id选择器最好不用使用，因为权重过高了

现在切图一般都不需要我们前端工程师制作

流程开发

前端设计师可以直接慕课/蓝湖测量取值

适配方案

swiper插件使用

swiper是用来处理轮播图的一系列操作，要是如此，则有就是 -

swiper首页 - 通过进入swiper首页来进行- 不同轮播图页面的选取！

移动端黑马页面就已经完成制作了

第一次使用git的时候，一定要尝试自己配置一下

利用 git 提交网站到码云

git上传demo到gitee仓库

根据这几步，最后push一下即可刷新页面以后就可以看见，

码云部署发布静态页面

直接拖拽文件 - 但是只能分批进行上传即可

前端人员还是建议使用码云来进行提交文件！

移动web开发响应式布局导读（第四种）

目标

响应式开发

响应式开发原理

通过媒体查询来进行处理操作

响应式布局容器

宽度设置稍微小一点可以左右空白，内容居中显示

通过媒体查询来对不同的屏幕尺寸来进行响应

响应式导航的案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .container {
            width: 750px;
            margin: 0 auto;
        }

        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }

        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }

            /* 不管自己的父亲占多少，我里面的子盒子还是占 1/3即可 */
            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>

</html>

Bootstrap简介

快速开发

优点

版本

4.0可能不太方便

bootstrap的使用

创建文件夹结构

书写内容即可

Bootstrap布局容器

Bootstrap栅格系统

之前学的rem是将整个屏幕划分为多少等份额，但是栅格系统是将内容部分，划分为多少等份

页面里面的内容会随着页面宽度的不同实现缩放效果

其实Bootstrap里面的样式初始化就是之前我们所引入的内容

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
    <title>Document</title>

    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        /* .login {
            width: 40px;
            height: 40px;
            line-height: 40px;
        } */
        /* 属性选择器 */
        [class ^="col"] {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <!-- Indicates a successful or positive action -->
    <!-- <button type="button" class="btn btn-success">Success</button> -->
    <!-- 其实 -->
    <!-- <div class="btn btn-success login">登录</div> -->
    <!-- <div class="container">123</div> -->
    <div class="container">
        <div class="row">
            <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 则孩子能够占满整个container的宽度
         -->
        <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-2">4</div>
        </div>

        <!-- 
            如果孩子的份数相加小于 12 则会 ？
            - 则占不满整个container的宽度，会有空白
        -->
        <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>

        <!-- 
            如果孩子的份数相加大于 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-3">4</div>
        </div>

    </div>
</body>

</html>

让我们在不同的屏幕下划分出不同的份数即可

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>

BootStrap嵌套列

列偏移

列排序

响应式工具

阿里百秀移动端首页