文章目录
移动适配
- rem：目前多数企业在用的解决方案
- vw/vh：未来的解决方案
1、rem
目标：能够使用rem单位设置网页元素的尺寸
-
网页效果
- 屏幕宽度不同，网页元素尺寸不同（等比缩放）
-
px 单位或百分比布局可以实现吗？
- px 单位是绝对单位
- 百分比布局特点宽度自适应，高度固定
-
适配方案
- rem
- vw/vh
-
rem单位
- 相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1 rem = 1HTML字号大小
/* 1rem = 1html标签字号大小 */
html {
font-size: 20px;
}
.box {
width: 5rem;
height: 3rem;
background-color: pink;
}
- 思考
- 1.手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
- 2.设备宽度不同，HTML标签字号设置多少合适？
媒体查询
rem移动适配 - 媒体查询
目标：能够使用媒体查询设置差异化CSS样式
- 思考
- 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
- 媒体查询
- 媒体查询能够检测视口的宽度，然后编写差异化的CSS 样式
- 当某个条件成立, 执行对应的CSS样式
- 写法
-
思考
- 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
- 设备宽度不同，HTML标签字号设置多少合适？
- 设备宽度大，元素尺寸大
- 设备宽度小，元素尺寸小
-
目前rem布局方案中，将网页等分成 10 份，HTML标签的字号为视口宽度的1/10
rem适配原理
目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
- 思考：
- 工作中，书写代码的尺寸要参照设计稿尺寸，设计稿中是px还是rem？
- 如何确定rem的数值？
- rem单位尺寸
- 根据视口宽度，设置不同的HTML标签字号
- 书写代码，尺寸是rem单位
- 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度→确定参考设备宽度(视口宽度)→确定基准根字号（1/10视口宽度） - rem单位的尺寸
N* 37.5= 68 →N= 68 /37.
rem单位的尺寸=px单位数值/基准根字号
- 确定设计稿对应的设备的HTML标签字号
flexible.js
目标：使用 flexible js 配合 rem 实现在不同宽度的设备中，网页元素尺寸等比缩放效果
-
思考：咱们检测了 3 个视口，分别设置了根字号，有什么弊端吗？
-
答：手机设备多，屏幕尺寸不一，视口不仅仅有这 3 个
-
flexible.js 是手淘开发出的一个用来适配移动端的 js 框架。
-
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的 font-size。
2、Less
Less语法
目标：使用Less运算写法完成px单位到rem单位的转换
- 思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？
- 答：除法运算。CSS不支持计算写法。
- 解决方案：可以通过Less实现。
目标：使用Less语法快速编译生成CSS代码
- Less是一个CSS预处理器, Less文件后缀是 .less
- 扩充了CSS 语言, 使CSS具备一定的逻辑性、计算能力。
- 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
编译插件
目标：使用Less语法快速编译生成CSS代码
Easy Less:
- vscode插件
- 作用：less文件保存自动生成css文件
注释：
-
单行注释
- 语法：// 注释内容
- 快捷键：ctrl + /
-
块注释
- 语法：/* 注释内容*/
- 快捷键：shift+alt+A
运算：
- 加、减、乘直接书写计算表达式
- 除法需要添加小括号或 .
- 注意：
- 表达式存在多个单位以第一个单位为准
Less语法
目标：能够使用Less嵌套写法生成后代选择器
嵌套：
- 思考：书写CSS选择器时，如何避免样式冲突？
嵌套：
-
作用：快速生成后代选择器。
-
语法：
-
注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
Less语法
目标：能够使用Less变量设置属性值
变量
-
思考：
- 网页中,文字文字颜色基本都是统一的，如果网站改版，变换文字颜色，如何修改代码？
- 方法一：逐一修改属性值（太繁琐）
- 方法二：把颜色提前存储到一个容器，设置属性值为这个容器名
变量
- 方法二：把颜色提前存储到一个容器，设置属性值为这个容器名
- 变量：存储数据，方便使用和修改。
- 语法：
- 定义变量：@变量名:值;
- 使用变量：CSS属性：@变量名;
Less语法
目标：能够使用Less导入写法引用其他Less文件
- 思考：
- 开发网站时，网页如何引入公共样式？
- CSS：书写link标签
- Less：导入
- 开发网站时，网页如何引入公共样式？
- 导入: @import “文件路径”;
Less语法
目标：使用Less语法导出CSS文件
- 思考：
- 目前，Less文件导出的CSS文件位置是哪里？
-
方法一：
- 配置EasyLess插件，实现所有Less有相同的导出路径
-
配置插件：设置→搜索EasyLess→在setting.json中编辑→添加代码（注意，必须是双引号）
-
方法二：控制当前Less文件导出路径
- Less文件第一行添加如下代码,注意文件夹名称后面添加/
- Less文件第一行添加如下代码,注意文件夹名称后面添加/
-
思考：所有的Less文件都需要导出CSS文件吗？
-
禁止导出
- 在less文件第一行添加: //out:false
- 在less文件第一行添加: //out:false
实战演练
- 游乐园项目
目标：实现在不同宽度设备中<等比缩放的网页效果
准备工作：项目目录及文件
- 根目录（paradise/FC）
整体布局：网页为灰色背景色
-
主体内容
- 底部间距（高度与工具栏相同）
-
底部工具栏
- 固定定位
- 尺寸
- 背景色
注意：需要设置基准根字号@rootSize: 37. 5 ；
index.html
<body>
<!-- 主体内容 -->
<div class="main">
<!-- banner -->
<div class="banner">
<ul>
<li><img src="./uploads/banner_1.png" alt=""></li>
</ul>
</div>
<!-- 活动标题 -->
<div class="title">
<h4>乐园活动</h4>
</div>
<!-- 活动区域 -->
<section class="item">
<div class="pic">
<img src="./uploads/item_1.png" alt="">
<!-- 收藏图标 -->
<i class="iconfont icon-shoucang1"></i>
<!-- 活动状态 -->
<div class="active off">进行中</div>
</div>
<div class="txt">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
</h5>
<p>免费</p>
</div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi
"></i><span>200</span>人已报名
</p>
<p>
<i class="iconfont icon-shizhong
"></i><span>本周六</span>开始
</p>
</div>
</div>
</section>
</div>
<!-- 主体内容 -->
<!-- 底部工具栏 -->
<footer>
<a href="#" class="current">
<i class="iconfont icon-index-copy "></i>
<p>首页</p>
</a>
<a href="#">
<i class="iconfont icon-index-copy"></i>
<p>首页</p>
</a>
<a href="#">
<i class="iconfont icon-index-copy"></i>
<p>首页</p>
</a>
</footer>
<!-- 底部工具栏 -->
<script src="./js/flexible.js"></script>
</body>
index.less
@import './base';
@import './normalize';
// 变量: 存储37.5
@rootSize: 37.5rem;
body {
background-color: #F0F0F0;
}
// 主体内容
.main {
// padding-bottom: (50 / 37.5rem);
padding-bottom: (50 / @rootSize);
// banner
.banner {
height: (160 / @rootSize);
}
// 活动标题
.title {
height: (40 / @rootSize);
line-height: (40 / @rootSize);
padding-left: (15 / @rootSize);
h4 {
font-size: (14 / @rootSize);
color: #3C3C3C;
}
}
// 活动
.item {
margin-bottom: (10 / @rootSize);
// 图
.pic {
height: (160 / @rootSize);
}
// 文字
.txt {
padding: (10 / @rootSize) (15 / @rootSize);
background-color: #fff;
}
}
}
// 底部工具栏
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
// height: (50 / 37.5rem);
height: (50 / @rootSize);
background-color: #FECA49;
}
3、vw / vh
目标：能够使用vw单位设置网页元素的尺寸
- 相对单位
- 相对视口的尺寸计算结果
- vw：viewportwidth
- 1vw=1/100视口宽度
- vh：viewportheight
- 1vh=1/100视口高度
vw适配原理
目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
- vw单位尺寸
- 确定设计稿对应的vw尺寸（1/100视口宽度）
查看设计稿宽度→确定参考设备宽度(视口宽度)→确定vw尺寸（1/100视口宽度） - vw单位的尺寸=px单位数值/(1/100视口宽度)
- vh单位尺寸
- 确定设计稿对应的vh尺寸（1/100视口高度）
查看设计稿宽度→确定参考设备高度(视口高度)→确定vh尺寸（1/100视口高度） - vh单位的尺寸=px单位数值/(1/100视口高度)
- 思考：开发中，会不会vw和vh混用呢？
- 不会。
-vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。
- 不会。
实战演练
- bilibili
目标：实现在不同宽度设备中等比缩放的网页效果
- 字体素材下载
检查元素→iconfont样式表→复制字体URL到浏览器地址栏→回车
准备工作：项目目录及文件
- 根目录（m-bilibili）
index.html
<!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>
<link rel="stylesheet" href="./css/index2.css">
<link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
<!-- 1. 头部固定 -->
<header>
<div class="top">
<a href="#" class="logo">
<i class="iconfont Navbar_logo"></i>
</a>
<div class="right">
<a href="#" class="search">
<i class="iconfont ic_search_tab"></i>
</a>
<a href="#" class="face">
<img src="./images/loading.png" alt="">
</a>
<div class="btn">
<img src="./images/download.png" alt="">
</div>
</div>
</div>
<div class="bottom">
<div class="tab">
<ul>
<li><a href="#" class="current">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
<div class="more">
<a href="#">
<i class="iconfont general_pulldown_s"></i>
</a>
</div>
</div>
</header>
<!-- 1. 头部固定 -->
<!-- tab：菜单的个数要和内容的个数相等 -->
<!-- 2. 视频 -->
<div class="video_content">
<div class="video_list">
<a href="#">
<div class="pic">
<img src="./images/moshu.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
237万
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
237万
</span>
</div>
</div>
<div class="txt">
真人手法VS动漫特效！我在现实世界还原了JOJO里的赌术！
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/moshu.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
237万
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
237万
</span>
</div>
</div>
<div class="txt">
真人手法VS动漫特效！我在现实世界还原了JOJO里的赌术！
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/moshu.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
237万
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
237万
</span>
</div>
</div>
<div class="txt">
真人手法VS动漫特效！我在现实世界还原了JOJO里的赌术！
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/moshu.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
237万
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
237万
</span>
</div>
</div>
<div class="txt">
真人手法VS动漫特效！我在现实世界还原了JOJO里的赌术！
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/moshu.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
237万
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
237万
</span>
</div>
</div>
<div class="txt">
真人手法VS动漫特效！我在现实世界还原了JOJO里的赌术！
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/moshu.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
237万
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
237万
</span>
</div>
</div>
<div class="txt">
真人手法VS动漫特效！我在现实世界还原了JOJO里的赌术！
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/moshu.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
237万
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
237万
</span>
</div>
</div>
<div class="txt">
真人手法VS动漫特效！我在现实世界还原了JOJO里的赌术！
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/moshu.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
237万
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
237万
</span>
</div>
</div>
<div class="txt">
真人手法VS动漫特效！我在现实世界还原了JOJO里的赌术！
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/moshu.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
237万
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
237万
</span>
</div>
</div>
<div class="txt">
真人手法VS动漫特效！我在现实世界还原了JOJO里的赌术！
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/moshu.jpg@480w_270h_1c" alt="">
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
237万
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
237万
</span>
</div>
</div>
<div class="txt">
真人手法VS动漫特效！我在现实世界还原了JOJO里的赌术！
</div>
</a>
</div>
</div>
<!-- 2. 视频 -->
<!-- 3. 按钮固定 -->
<!-- 3. 按钮固定 -->
</body>
</html>
index.less
@import './base.less';
@vw: 3.75vw;
@color: #fb7299;
// 头部固定
header {
z-index: 1;
position: fixed;
top: 0;
left: 0;
// 固定定位，要写宽度
width: 100%;
height: (84 / @vw);
background-color: #fff;
.top {
display: flex;
justify-content: space-between;
align-items: center;
height: (44 / @vw);
padding: 0 (12 / @vw) 0 (18 / @vw);
.logo {
width: (61 / @vw);
height: (28 / @vw);
.iconfont {
color: @color;
font-size: (28 / @vw);
}
}
.right {
display: flex;
.iconfont {
font-size: (22 / @vw);
padding-right: (12 / @vw);
}
.face {
width: (24 / @vw);
height: (24 / @vw);
margin-right: (12 / @vw);
img {
border-radius: 50%;
}
}
.btn {
width: (72 / @vw);
height: (24 / @vw);
}
}
}
.bottom {
display: flex;
justify-content: space-between;
height: (40 / @vw);
border-bottom: 1px solid #eee;
.more {
a {
display: block;
width: (40 / @vw);
height: (40 / @vw);
text-align: center;
line-height: (40 / @vw);
color: #aaa;
.iconfont {
font-size: (20 / @vw);
}
}
}
// 导航栏
.tab {
ul {
display: flex;
li {
padding: 0 (16 / @vw);
a {
display: block;
height: (39 / @vw);
line-height: (39 / @vw);
&.current {
color: @color;
border-bottom: 1px solid @color;
}
}
}
}
}
}
}
// 头部固定
// 视频区域
.video_content {
padding: (84 / @vw) (5 / @vw);
.video_list {
display: flex;
flex-wrap: wrap;
a {
width: 50%;
padding: (8 / @vw) (5 / @vw);
font-size: (12 / @vw);
font-family: 微软雅黑;
.pic {
position: relative;
img {
border-radius: (5 / @vw);
}
.count {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
// 因为相对定位后脱标
width: 100%;
padding: (5 / @vw) (6 / @vw);
border-radius: (5 / @vw);
background-image: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
span {
color: #fff;
i {
vertical-align: middle;
}
}
}
}
.txt {
margin-top: (6 / @vw);
color: #212121;
}
}
}
}
// 视频区域
响应式
响应式网页
一套代码能够兼容不同的设备叫做响应式网页
1、媒体查询
基本语法
目标：
能够根据设备宽度的变化，设置差异化样式
- 开发常用写法
- 媒体特性常用写法
- max-width
- min-width
- 媒体特性常用写法
书写顺序
- min-width（从小到大）
- max-width（从大到小）
- 需求
- 默认网页背景色是灰色
- 屏幕宽度在 768 - 992 之间, 网页背景色是粉色
- 屏幕宽度在 992 - 1200 之间, 网页背景色是skyblue
- 屏幕宽度大于1200, 网页背景色是绿色
@media (min-width : 768px) {
body {
background-color: pink;
}
}
@media (min-width:992px) {
body {
background-color: skyblue;
}
}
@media (min-width:1200px) {
body {
background-color: green;
}
}
- 完整写法
关键词
- and
- only
- not
媒体类型
- 媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。
- 媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。
基本语法
- 外链式CSS引入
2、BootStrap
UI框架
目标：知道 UI框架的作用
- UI框架概念
- 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。
- 作用
- 基于框架开发，效率高，稳定性高。
BootStrap简介
目标：使用 BootStrap 框架快速开发响应式网页
- Bootstrap 是由Twitter 公司开发维护的前端UI 框架，它提供了大量编写好的CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
- 中文官网: https://www.bootcss.com/
使用步骤
BootStrap使用步骤
首页 →BootStrap3中文文档 →下载BootStrap
2、使用步骤
-
引入：BootStrap提供的CSS代码
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css"> -
调用类：使用BootStrap提供的样式
- container：响应式布局版心类
栅格系统
BootStrap栅格系统
目标：使用BootStrap栅格系统布局响应式网页
- 栅格化是指将整个网页的宽度分成若干等份
- BootStrap3默认将网页分成 12 等份
- .container是Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
- .container-fluid也是Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
- 分别使用.row类名和.col类名定义栅格布局的行和列。
注意:
- container类自带间距 15 px;
- row类自带间距- 15 px
全局样式
目标：掌握BootStrap手册用法，使用全局CSS样式美化标签
手册用法：
BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。
网站首页→BootStrap 3 中文文档→全局CSS样式→按分类导航查找目标类
- 布局类：表格
- table : 基本类名, 初始化表格默认样式
- table-bordered : 边框线
- table-striped : 隔行变色
- table-hover : 鼠标悬停效果
- table-responsive : 表格宽溢出滚动
-
美化内容类：按钮
- btn : 基准样式
- btn-info; btn-success : 设置按钮背景色
- btn-block : 设置按钮为块元素
- btn-lg; btn-sm; btn-xs : 设置按钮大小
-
布局类：表单
- form-control : 设置表单元素input, select, textarea的样式
- checkbox 和radio : 设置复选框和单选框的样式
- form-inline : 设置表单元素水平排列
- disabled : 设置表单禁用状态样式
- input-lg; input-sm, input-sm : 设置表单元素的大小
-
美化内容类：图片
- img-responsive: 图片自适应
- img-rounded : 图片设置圆角
- img-circle : 图片设置正圆
- img-thumbnail : 图片添加边框线
-
布局类：辅助类
- pull-right: 强制元素右浮动
- pull-left: 强制元素左浮动
- clearfix: 清除浮动元素的影响
- text-left文: 本左对齐
- text-right: 文本右对齐
- text-center: 文本居中对齐
- center-block : 块元素居中
-
布局类：响应式工具（不同屏幕尺寸隐藏或显示页面内容）
组件
目标：使用BootStrap组件快速布局网页
- 组件
- BootStrap提供的常见功能，包含了HTML结构和CSS样式。
- 使用方法
- 引入BootStrap样式
- 复制结构，修改内容
Glyphicons字体图标
目标：使用Glyphicons字体图标实现网页中的图标效果
- Glyphicons字体图标的使用步骤
- HTML页面引入BootStrap样式文件
- 准备字体文件(注意路径)
- 空标签调用对应类名
- glyphicon
- 图标类
插件
目标：了解 插件 的概念及使用方法
-
思考
- 只有HTML和CSS的下拉菜单，单击后能弹出子菜单吗？
- 只有HTML和CSS的下拉菜单，单击后能弹出子菜单吗？
-
插件
- BootStrap提供的常见效果, 包含了HTML结构，CSS样式与JavaScript
插件使用
目标：使用BootStrap插件实现常见的交互效果
- 插件的使用步骤
-
引入BootStrap样式
-
引入js文件：jQuery.js+BootStrap.min.js
-
复制HTML结构, 并适当调整结构或内容
-
定制
目标：能够根据项目需求定制bootstrap框架
- 定制步骤
- 导航菜单→定制
- 输入目标变量值
- 编译并下载，使用定制后的框架
实战演练
AlloyTeam
目标：使用BootStrap快速布局网页
技术点
- 组件
- 插件
- 栅格系统
- 定制
1621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
