l PC端网页和移动端网页的有什么不同？
l PC端网页和移动端网页的有什么不同？
Ø PC屏幕大，网页固定版心
Ø 手机屏幕小，网页宽度多数为100%
l 如何在电脑里面边写代码边调试移动端网页效果？
Ø 谷歌模拟器
PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%；

目标：使用谷歌模拟器调试移动端网页

在这里插入图片描述

<!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>确认订单</title>
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/orders.css">
</head>
<body>
    <!-- 主体内容: 滑动查看 -->
    <div class="main">
        <!-- 用户信息 -->
        <div class="pannel user_msg">
            <div class="location">
                <i class="iconfont icon-location"></i>
            </div>
            <div class="user">
                <div class="top">
                    <h5>林丽</h5>
                    <p>18500667882</p>
                </div>
                <div class="bottom">北京市  海淀区  中关村软件园   信息科技大厦1号
                    楼410#   </div>
            </div>
            <div class="more">
                <i class="iconfont icon-more"></i>
            </div>
        </div>
        <!-- 用户信息 -->
    </div>
    <!-- 主体内容: 滑动查看 -->

    <!-- 底部支付: 固定定位 -->
    <div class="pay">
        <div class="left">
            合计: <span class="red">￥<i>266.00</i></span>
        </div>
        <div class="right">
            <a href="#">去支付</a>
        </div>
    </div>
    <!-- 底部支付: 固定定位 -->
</body>
</html>

* {
    
    
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
    
    
  font: 16px/1.5 sans-serif;
  color: #333;
  background-color: #fff;
}
li {
    
    
  list-style: none;
}
em,
i {
    
    
  font-style: normal;
}
a {
    
    
  text-decoration: none;
  color: #333;
}
a:hover {
    
    
  color: #5eb69c;
}
img {
    
    
  width: 100%;
  vertical-align: middle;
}
input {
    
    
  padding: 0;
  border: none;
  outline: none;
  color: #333;
}
button {
    
    
  cursor: pointer;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
    
    
  content: '';
  display: table;
}
.clearfix:after {
    
    
  clear: both;
}
.clearfix {
    
    
  *zoom: 1;
}

body {
    
    
    background-color: #f7f7f8;
}

/* 公共样式 */
.red {
    
    
    color: #cf4444;
}

.pannel {
    
    
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}

/* 主体内容 */
.main {
    
    
    /* 80px: 为了内容不被底部区域盖住 */
    padding: 12px 11px 80px;
}

/* 用户信息 */
.user_msg {
    
    
    display: flex;
    align-items: center;
    padding: 15px 0 15px 11px;
}

.user_msg .location {
    
    
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.user_msg .user {
    
    
    flex: 1;
}

.user_msg .user .top {
    
    
    display: flex;
}

.user_msg .user .top h5 {
    
    
    width: 55px;
    font-size: 15px;
    font-weight: 400;
}

.user_msg .user .top p {
    
    
    font-size: 13px;
}

.user_msg .user .bottom {
    
    
    margin-top: 5px;
    font-size: 12px;
}

.user_msg .more {
    
    
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
    color: #808080;
}







/* 主体内容 */

/* 底部支付 */
.pay {
    
    
    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    /* 主轴对齐方式 */
    justify-content: space-between;
    /* 侧轴对齐方式 */
    align-items: center;

    width: 100%;
    height: 80px;

    padding: 0 11px;
    /* background-color: pink; */
    border-top: 1px solid #ededed;
}

.pay .left {
    
    
    font-size: 12px;
}

.pay .left i {
    
    
    font-size: 20px;
}

.pay .right a {
    
    
    display: block;
    width: 90px;
    height: 35px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    border-radius: 3px;
    text-align: center;
    line-height: 35px;
    font-size: 13px;
    color: #fff;
    
}
/* 底部支付 */

屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量
物理分辨率：生产屏幕的时候固定的，不可以被改变的
逻辑分辨率：软件驱动绝定的
使用meta标签设置视口宽度，制作适配不同设备的宽度的网页。
逻辑分辨率：由软件驱动绝定的
物理分辨率：生产屏幕的时候就固定了，它是不可以被改变的
视口：使用meta标签设置视口宽度，制作适配不同设备宽度的网页。
网页的宽度和逻辑分辨率尺寸相同
默认网页宽度是980px
viewport视口
width=device-width视口宽度=设备款第
图片分辨率：为了让高分辨率下图片不会模糊失真
百分比布局，也叫流式布局，高度固定，宽度自适应
flex布局：多个盒子横向排列使用浮动属性，设置盒子的间距：margin
注意什么问题：浮动盒子脱标
flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更加简单灵活，避免浮动脱标。
基于flex精确灵活控制块级盒子的布局方式，避免浮动布局当中脱离文档流现象发生。基于flex精确灵活控制块级盒子的布局方式，避免浮动布局当中脱离文档流现象的发生。
flex布局非常适合结构化布局display:flex;
在这里插入图片描述
justify-content:
调节元素再主轴的对齐方式
再felx布局模型当中，调节主轴或者测轴的对齐方式来设置盒子之间的间距。
在flex布局模型当中，调节主轴或者测卓的对齐方式来设置盒子之间的间距。
space-around弹性盒子沿着主轴均匀排列，空白间距均分在弹性盒子的两侧
space-between弹性盒子沿着主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly:弹性盒子沿着主轴均匀排列，弹性盒子与总起之间的间距相等
修改主轴对齐方式的属性:justify-content
justify-content,justify-content
修改主轴的对齐方式属性:justify-content
align-items
align-items，align-items调节元素在测轴的对齐方式
调节元素在测轴的对齐方式
在这里插入图片描述
align-items调节元素在测轴的对齐方式
align-items添加到弹性容器，align-self:控制某个弹性盒子在测轴的对齐方式，添加到弹性盒子
flex-start默认值，起点开始一次排列
flex-end重点开始依次排列
center沿着测轴居中排列
stretch
默认值，弹性盒子沿着主轴被拉伸stretch,弹性盒子沿着主轴被拉伸到铺满容器

flex-direction改变元素的排列方向
flex-direction,改变元素的排列方向，默认是水平方向，主轴，测轴是垂直方向
row行，水平默认值
colum列，垂直
row-reverse
行，从右向左
弹性盒子换行
flex-wrap实现弹性盒子多行排列效果
弹性盒子换行显示:flex-wrap:warp;
flex:-wrap:wrap;flex-wrap:wrap;
align-content;调整行对齐方式
align-content:align-content,align-content调整行对齐方式
Ø 取值与justify-content基本相同

移动适配

在这里插入图片描述
rem目前多数企业再用的解决方案
vw/vh未来的解决方案
rem能够使用rem单位设置网页元素的尺寸
rem能够使用rem单位设置网页元素的尺寸

rem单位设置网页元素的尺寸
网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位是绝对单位，百分比布局特点是宽度自适应，高度固定
高度固定，宽度自适应
Ø 屏幕宽度不同，网页元素尺寸不同（等比缩放） l px单位或百分比布局可以实现吗？
Ø px单位是绝对单位
Ø 百分比布局特点宽度自适应，高度固定
l 适配方案
Ø rem
Ø vw / vh
rem,vw/vh
rem目标：能够使用rem单位设置网页元素的尺寸
使用rem单位设置网页元素的尺寸
相对单位，
rem单位是相对于HTML标签的字号计算结果的
1rem=1HTML字号大小
1rem=1HTML字号大小
l 思考
Ø 1. 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
Ø 2. 设备宽度不同，HTML标签字号设置多少合适？

rem移动适配 - 媒体查询

rem移动适配-媒体查询
手机屏幕大小不同，分辨率不同，如果设置不同的HTML标签字号?
媒体查询
媒体查询能够检测视口的宽度，检测视口的宽度，然后编写差异化的css样式
当某个条件成立，执行对应的CSS样式
在这里插入图片描述
@media(width:320px){html{font-sizze:32px;}}
@media(width:320px){html{font-size:32px;}
@meida(width:320px){html{font-size:320px;}}

l 思考
Ø 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
Ø 设备宽度不同，HTML标签字号设置多少合适？
Ø 设备宽度大，元素尺寸大
Ø 设备宽度小，元素尺寸小
手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？设备宽度不同HTML标签字号设置多少合适？
设备宽度大，元素尺寸大，设备宽度小，元素尺寸小
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
HTML标签的字号为视口宽度的1、10
在这里插入图片描述
HTML标签字号为视口宽度的1/10
@media(width:320px){html{font-size:32px;}}
@media(width:375px){html{font-size:37.5px;}}
@media(width:414px){html{font-size:41.4px;}}
l rem单位尺寸

根据视口宽度，设置不同的HTML标签字号
书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
Ø 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
Ø N * 37.5 = 68 → N = 68 / 37.5
Ø rem单位的尺寸 = px单位数值 / 基准根字号
根据视口宽度，设置不同的HTML标签字号，书写代码尺寸是rem单位
确定设计稿对应的设备的HTML标签字号
查看设计稿宽度-》确定参考设备宽度（视口宽度）-》确定基准根字号
rem单位的尺寸=px单位数值/基准根字号
目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
flexible.js配合rem实现在不同宽度的设备当中，网页元素等比缩放效果
l 思考：咱们检测了3个视口，分别设置了根字号，有什么弊端吗？
l 答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个
script src="./js/flexible.js"
l flexible.js是手淘开发出的一个用来适配移动端的js框架。 l 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
flexible.js是一个用来适配移动端的js框架
核心原理就i是根据不同的视口宽度给网页当中html根节点设置不同的font-size

Less语法

使用less运算写法完成px单位到rem单位的转换
使用less运算写法完成px单位到rem单位的转换
l 思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？
l 答：除法运算。CSS不支持计算写法。
除法运算，css不支持计算写法
l 解决方案：可以通过Less实现。
less是一个css预处理器，less文件后缀是.less
扩充了css语法，使得css剧本一定的逻辑性，计算能力
浏览器不识别less代码，less是一个css预处理器，less文件后缀是.less
扩充了css语法，使得css具备一定的路i机型计算能力
浏览器不识别less代码，目前阶段，网页要引入对应的css文件
Easy Less :
l vscode插件
l 作用：less文件保存自动生成css文件
vscode插件，less文件保存自动生成的css文件
//注释内容
cyrl+/
注释：
l 单行注释
Ø 语法：// 注释内容
Ø 快捷键：ctrl + / l 块注释
Ø 语法：/* 注释内容 */ Ø 快捷键： shift + alt + A
shift+alt+A
shirt+alt+A
目标：使用Less运算写法完成px单位到rem单位的转换
运算：
l 加、减、乘直接书写计算表达式 l 除法需要添加小括号或 .
除法需要添加小括号或者.
表达式存在多个单位以第一个单位为准
在这里插入图片描述

.xtx_body_aside .user_meta .avator{}
.xtx_body_aside .user_meta h4{}
font-sixe:18px;font-weight:500;margin:14px 0 12px;
.xtx_bodt_aside .user_meta h4{}
.xtx_body_aside .user_meta h4{font-size:18px;font-weight:500;margin:14px 0 12px;}

&不生成后代选择器，&不生成后代选择器，表示当前选择器，通常配合伪类或者伪元素使用
伪类或者伪元素
.afther{color:red;}
.father:hover{color:green;}
目标：能够使用less变量设置属性值
变量
l 思考：
Ø 网页中, 文字文字颜色基本都是统一的，如果网站改版，变换文字颜色，如何修改代码？
Ø 方法一：逐一修改属性值（太繁琐）
Ø 方法二：把颜色提前存储到一个容器，设置属性值为这个容器名
文字文字颜色基本都是统一的，如果网站改版，变换文字颜色，如何修改代码？
逐一修改属性值（太繁琐）
逐一修改属性值（太烦扫）
把颜色提前存储到一个容器当中，设置属性值为这个容器名
把亚瑟提前存储到一个容器当中，把颜色提前存储到一个容器当中，设置属性值为这个容器名）
变量
l 方法二：把颜色提前存储到一个容器，设置属性值为这个容器名 l 变量：存储数据，方便使用和修改。 l 语法：
Ø 定义变量：@变量名: 值; Ø 使用变量：CSS属性：@变量名;
把颜色提前存储到一个容器当中，设置属性值为这个容器名
存储数据，方便使用和修改
@变量名:值;
css属性:@变量名;
l 思考：
Ø 开发网站时，网页如何引入公共样式？
Ø CSS：书写link标签
Ø Less：导入
l 导入: @import “文件路径”;
在这里插入图片描述
@import ‘base.lss’;
@import ‘01-体验less’;

目标：使用Less语法导出CSS文件
l 方法一：
Ø 配置EasyLess插件，实现所有Less有相同的导出路径
l 配置插件：设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
配置EasyLess插件，实现所有的less右相同的导出路径
设置->搜索EasyLess-》setting.json当中编辑-》添加代码
“out”:"./css/"
l 方法二：控制当前Less文件导出路径
Ø Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
控制当前less文件的导出路径
less文件第一行添加如下的代码，注意文件夹名称后面添加/
在这里插入图片描述

//out:false;
//out:false;

项目目录以及文件:根目录

vw/vh

能够使用vw单位设置网页元素的尺寸
相对单位，相对视口的尺寸计算结果，相对视口的尺寸计算结果
1vw=1/100视口宽度
1vh=1/100视口宽度
vw=1/100视口宽度
vh:viewport height
1vh=1/100视口高度

vh单位的尺寸=px单位数值/(1/100)视口高度）
vh单位的尺寸=px单位数值/(1/100视口高度）
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
检查元素 → iconfont样式表 → 复制字体URL到浏览器地址栏 → 回车
准备工作：项目目录及文件
l 根目录（ m-bilibili）
项目目录以及文件
根目录m-bilibili
在这里插入图片描述
rem vw/vh
市场比较常见：

需要不断修改html文字大小
需要媒体查询media
需要 flexible.js

rem市场比较常见
1.需要不断修改html文字大小
2.需要媒体查询media
3.需要flexiblejs
将来马上的趋势：
1.省去各种判断和修改
代表：b站
@media(媒体查询）{选择器{样式}}
768-992粉色
992-1200skyblue
1200绿色
在这里插入图片描述
992-1200skyblue;1200绿色

@media 关键词媒体类型 and(媒体特性){CSS代驾}

l 媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。
媒体特性主要用来描述媒体类型的具体特指
kandsacpe:横屏landscape横屏lanscape横屏
portrait竖屏portrait竖屏
lanscape横屏
orientation屏幕方向在这里插入图片描述

link rel=“stylesheet"media=“逻辑父媒体类型 and(媒体特性)” href=“xxx”
link rel=“stylesheet” media=“逻辑父媒体类型 and(媒体特性)” href=“xx.css”
BootStrap
UI框架
目标：知道 UI框架的作用
l UI框架概念
Ø 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。 l 作用
Ø 基于框架开发，效率高，稳定性高。
将常见的效果进行统一封装后形成一套代码，BootStrap
基于框架开发，效率高，稳定性高
目标：使用 BootStrap框架快速开发响应式网页
l Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定
HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
l 中文官网: https://www.bootcss.com/
1.引入：BootStrap提高CSS代码
link rel=“stylesheet” href=”./bootstrap-3.337/css/bootstrap.css"
调用类：使用BootStrap提供的样式
Ø container：响应式布局版心类
container响应式布局版心类
<768px xs col-xs-*1230px
在这里插入图片描述
.container是BootStrap当中专门提供的类名，所有应用该类名的盒子，默认已经被指定宽度并且居中
.container-fluid也是BootStrap当中专门提供的类名，所有应用该类名的盒子，宽度均为100%,
container类自带间距15pxrow类自带间距-15px
在这里插入图片描述
BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点，
l 布局类：表格 Ø table : 基本类名, 初始化表格默认样式
Ø table-bordered : 边框线
Ø table-striped : 隔行变色
Ø table-hover : 鼠标悬停效果
Ø table-responsive : 表格宽溢出滚动
table基本类名，初始化表格的默认样式
table-bordered边框线
table-striped隔行变色
table-resonsive表格宽溢出滚动
在这里插入图片描述
btn:基准样式
btn-info,btn0success设置按钮背景色
btn-block设置按钮为块元素

布局类：表单
Ø form-control : 设置表单元素input, select, textarea的样式
Ø checkbox 和 radio : 设置复选框和单选框的样式
Ø form-inline : 设置表单元素水平排列
Ø disabled : 设置表单禁用状态样式
Ø input-lg; input-sm, input-sm : 设置表单元素的大小
form-control设置表单元素input,selecttextarea的样式
在这里插入图片描述
img-responsive图片自适应
img-rounded图片设置圆角
img-circle图片设置正圆
img-thumbnail,img-thumbnail,img-thumbnail图片添加边框线

center-block款元素居中，块元素居中，

l 布局类：辅助类 Ø pull-right : 强制元素右浮动
Ø pull-left : 强制元素左浮动
Ø clearfix : 清除浮动元素的影响
Ø text-left文 : 本左对齐
Ø text-right : 文本右对齐
Ø text-center : 文本居中对齐
Ø center-block : 块元素居中
xs超小屏幕,sm小屏幕md中等屏幕,ls大屏幕

Glyphicons字体图标

Glyphicons
Glyphicons,glyphicons,
在这里插入图片描述

l 定制步骤
Ø 导航菜单 → 定制
Ø 输入目标变量值
Ø 编译并下载，使用定制后的框架

移动Web(4)使用谷歌模拟器调试移动端网页, 移动适配, 媒体查询, Less语法