文章目录
- 一、视口
- 1、布局视口 (layout viewport)
- 2、视觉视口 (visual viewport)
- 3、理想视口 (ideal viewport)
- 4、meta 视口标签
- 5、标准的 viewport 参数设置
- 二、二倍图
- 1、物理像素 & 物理像素比
- 2、多倍图
- 3、二倍精灵图做法
- 三、移动端开发选择
- 1、移动端主流方案
- 2、移动端技术解决方案
- 3、移动端常见不布局方式
- 四、移动端开发-流式布局案例
- 1、了解流式布局
- 2、移动端首页
- 3、CSS3 线性渐变背景 (拓展)
- 4、文字渐变
- 五、flex 布局体验
- 1、了解 felx 布局原理
- 2、flex 布局父项常见属性
- ①、flex-direction:设置主轴的方向
- ②、 justify-content:主轴上的子元素排列方式
- ③、flex-wrap:子元素是否换行
- ④、align-content:侧轴上的子元素的排列方式 (多行)
- ⑤、align-items:侧轴上的子元素的排列方式 (单行)
- ⑥、flex-flow
- 3、flex布局子项常见属性
- ①、flex 属性
- ②、align-self 控制子项自己在侧轴的排列方式
- ③、order 属性定义子项的排列顺序
- 六、rem 基础
- 1、rem 单位
- 2、媒体查询
- ①、mediatype 媒体类型
- ②、关键字
- ③、媒体特性
- ④、引入资源
- 3、媒体查询 + rem
- 4、rem 适配原理
- ①、rem 适配方案 思考
- ②、rem 实际开发适配方案
- Ⅰ、rem 实际开发适配方案
- 七、less 基础
- 1、维护 css 的弊端
- 2、Less 介绍
- 3、Less 安装
- 4、Less 使用
- ①、Less 变量
- Ⅰ、变量名命名规范
- Ⅱ、变量使用规范
- ②、Less 编译
- ③、Less 嵌套
- ④、Less 运算
- 八、响应式开发
- 1、了解响应式开发原理
- ①、响应式开发原理
- ②、响应式布局容器
- 2、Bootstrap
- ①、Bootstrap 使用方法
- Ⅰ、Bootstrap 使用四部曲
- Ⅱ、创建 html 骨架结构
- Ⅲ、引入相关样式文件
- Ⅳ、书写内容
- ②、Bootstrap 布局容器
- Ⅰ、container 类
- Ⅱ、container-fluid 类
- ③、栅格系统
- Ⅰ、栅格选项参数
- Ⅱ、列嵌套
- Ⅲ、列偏移
- Ⅳ、列排序
- ④、响应式工具
一、视口
- 视口 ( viewport ),就是浏览器显示页面内容的屏幕区域。
- 视口可以分为布局视口、视觉视口、理想视口
1、布局视口 (layout viewport)
- 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早起 PC 端页面在手机上显示的问题
- IOS,Android 基本都将这个视口分辨率设置为 980px,所以 PC 上的网页大多都在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页
2、视觉视口 (visual viewport)
- 它是用户正在看到的网站的区域
- 可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口扔保持原来的宽度
3、理想视口 (ideal viewport)
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口,对设备来讲,是最理想的视口尺寸
- 需要手动添加 <meta> 视口标签通知浏览器操作
- <meta> 视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多看,我们布局的视口就多宽
4、meta 视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
属性 | 解释说明 |
---|---|
width | 宽度设置的是 viewport 宽度,可以设置 device-width 特殊值 |
initial-scale | 初始缩放比,大于0的数字 |
maximum-scale | 最大缩放比,大于0的数字 |
minimum-scale | 最小缩放比,大于0的数字 |
user-scalable | 用户是否可以缩放,yes 或 no (1 或 0) |
5、标准的 viewport 参数设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
视口就是浏览器显示内容的屏幕区域,想要理想视口,就要给移动端页面添加 <meta>
二、二倍图
1、物理像素 & 物理像素比
- 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的,这是厂商在出厂时就设置好了,比如苹果 6\7\8 是 750 * 1334
- 开发时候的 1px 不是一定等于 1 个物理像素
- PC 端页面,1 个 PX 等于 1 个物理像素,但是移动端就不尽相同
- 一个 px 的能显示的物理像素点的个数,称为物理像素比或屏幕像素比
<div style="width: 375px; height: 300px; background-color: skyblue;"></div>
- pc 端 和 早期的手机屏幕 / 普通手机屏幕:1CSS 像素 = 1 物理像素
- Retina ( 视网膜屏幕) 是一种显示技术,可以将更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,提高屏幕显示的细腻程度
2、多倍图
- 对于一张 50px * 50px 的图片,在手机 Retina 屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊
- 在标准的 viewport 设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题
- 通常使用二倍图,因为 iphone 6\7\8 的应该向,但是现在还存在 3 倍图 4 倍图的情况,这个看实际开发需求
- 背景图片注意缩放问题
<!-- 问题:如果一个 50 * 50px 的图片放在手机屏幕中,占有的物理像素点是 100 * 100个,会造成图片模糊 -->
<!-- 解决方法:使用一个本身就是 100 * 100px 的图片进行制作,替换原来图片,然后设置为 50 * 50 -->
<img src="images/apple50.jpg" alt="">
<img src="images/apple100.jpg" alt="">
<div class="box"></div>
/* 插入图 */
img:nth-child(2) {
width: 50px;
height: 50px;
}
/* 背景图 */
.box {
width: 50px;
height: 50px;
/* 背景图也需要使用高背图进行添加 */
background: url(images/apple100.jpg);
/* CSS3 新增的更改背景属性 */
background-size: 50px 50px;
}
- @3X 3倍图
- @2X 2倍图
- @1X 1倍图原图
3、二倍精灵图做法
- 在 firework 里面把精灵图等比例缩放为原来一般
- 之后根据新的大小 测量坐标
- 注意代码里面 background-size 也要写 精灵图原来宽度的一半
三、移动端开发选择
1、移动端主流方案
- 单独制作移动端页面 (主流)
- 参考:京东商城手机版、淘宝触屏版等
- 通常情况下,网址域名前面加 m(mobile) 可以打开移动端,通过判断设备,如果是移动设备打开,则跳到移动端界面
- 响应式界面兼容移动端 (其次)
- 参考:三星手机官网
- 响应式网站:即PC和移动端公用一套网站,只不过在不同宽度的屏幕下,样式会自动匹配
- 缺点:制作麻烦,需要花很大精力去调试兼容性问题
2、移动端技术解决方案
浏览器
- 移动端浏览器基本以 webkit 内核为主,要考虑 webkit 兼容性问题,可以放心使用 H5 标签和 CSS3 样式
- 同时浏览器的私有签注我们只需要考虑添加 -webkit- 即可
CSS 初始化 normalize.css
- 移动端 CSS初始化推荐使用 normalize.css
- 优点:
- normalize.css:保护了有价值的默认值
- normalize.css:修复浏览器的 BUG
- normalize.css:是模块化的
- normalize.css:有详细的文档
官方网址:http://necolas.github.io/normalize.css/
CSS3 盒子模型 box-sizing
- 传统模式宽度计算:盒子的高度 = CSS 中设置的 width + border + padding
- CSS3 盒子模型:盒子的宽度 = CSS 中设置的宽度 width 里面包含了 border 和 padding 也就是说,CSS3 中的盒子模型,padding 和 border 不会撑大盒子
/* 传统盒模型 : 边框、内边距在宽高之外进行扩展*/
.box1 {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid slateblue;
background-color: skyblue;
}
/* css3 盒模型:元素占有的整体宽度不变,添加内边距和边框后,自动内减 */
.box2 {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid slateblue;
box-sizing: border-box;
background-color: skyblue;
}
特殊样式
/* CSS3 盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮我们需要清除清除 设置为 transparent 完成透明 */
-webkit-tap-highlight-color: transparent;
/* 在移动端浏览器默认的外观在 ios 上加上这个属性才能给按钮和输入框定义自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时的弹出菜单 */
img,a { -webkit-touch-callout: none; }
3、移动端常见不布局方式
- 单独制作移动端页面 (主流)
- 流式布局 (百分比布局)
- flex 弹性布局 (强烈推荐)
- less + rem + 媒体查询布局
- 混合布局
- 响应式界面兼容移动端 (其次)
- 媒体查询
- bootstrap
四、移动端开发-流式布局案例
以京东界面为例
1、了解流式布局
- 流式布局,就是百分比布局,也成非固定像素布局
- 通过将盒子的宽度设置成百分比,从而根据屏幕宽度来进行收缩,不受固定像素的限制,内容向两侧填充
- 流式布局方式是移动 web 开发使用的比较常用的布局方式
注意事项
- 在制作过程中,需要定义页面的最大和最小支持宽度
- max-width 最大宽度 ( max-height 最大高度 )
- min-width 最小宽度 ( min-height 最小高度 )
body {
min-width: 320px;
max-width: 980px;
}
section {
width: 100%;
height: 100px;
background-color: skyblue;
}
section div {
float: left;
width: 50%;
height: 100px;
border: 5px solid steelblue;
box-sizing: border-box;
background-color: slateblue;
}
<section>
<div>1</div>
<div>2</div>
</section>
2、移动端首页
京东移动端首页访问地址:https://m.jd/
搭建相关文件夹结构
设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maxmum=1.0,minimum=1.0">
<!-- 引入初始化 css 文件 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 引入自己的首页 css -->
<link rel="stylesheet" href="css/index.css">
常用的初始化样式
/* 给 body 进行样式初始化设置 */
body {
width: 320px;
max-width: 540px;
margin: 0 auto;
background-color: #fff;
font-size: 14px;
line-height: 1.5;
font-family: -apple-system,Helvetica,sans-serif;
color: #666;
}
特殊设置
/* 点击高亮我们需要清除清除 设置为 transparent 完成透明 */
* {
-webkit-tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观在 ios 上加上这个属性才能给按钮和输入框定义自定义样式 */
input {
-webkit-appearance: none;
}
/* 禁用长按页面时的弹出菜单 */
img,a {
-webkit-touch-callout: none;
}
- 当图片过大,图片的基线和文字基线是水平居中的,但是视觉上图片呈上部,可以设置
vertical-align: middle; /* 垂直方向对齐 */
3、CSS3 线性渐变背景 (拓展)
参考网址:https://developer.mozilla/zh-CN/docs/Web/CSS/linear-gradient
- linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片
- linear-gradient() 函数没有内在尺寸
background-image: linear-gradient(to top,red,skyblue);
4、文字渐变
- 先设置背景渐变
background: linear-gradient(90deg, #45CAFF,#1471FB);
- 设置 -webkit-background-clip: text; 意思就是以盒子内的文字作为裁剪区,文字以外的部分就会被剪掉
- 把文字设置为透明
color: transparent;
五、flex 布局体验
1、了解 felx 布局原理
- 传统布局
- 兼容性好
- 布局繁琐
- 局限性,不能在移动端更好的布局
- flex 布局
- 操作方便,布局极为简单,移动端应用很广泛
- PC 端浏览器支持情况较差
- IE 11 或更低版本,不支持或仅支持部分支持
flex 布局原理
-
flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局
-
当我们为父盒子设为 flex 布局以后,子元素的 float、clear和 vertical-align属性将失效
-
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
-
采用 felx 布局的元素,称为 flex 容器,简称容器,它的所有子元素自动称为容器成员,称为 flex 项目,简称项目
2、flex 布局父项常见属性
以下由6个属性是对父元素设置的
- flex-direction:设置主轴的方向
- justify-content:设置主轴上的子元素排列方式
- flex-wrap:设置子元素是否换行
- align-content:设置侧轴上的子元素的排列方式 (多行)
- align-items:设置侧轴上的子元素的排列方式 (单行)
- flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
align-content 和 align-items
- align-items 适用于单行情况下,只有上对齐、下对齐、居中和拉伸
- align-content 使用于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
- 总结就是单行找 align-itens 多行找 align-content
①、flex-direction:设置主轴的方向
主轴与侧轴
- 在 flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴
- 默认主轴方向就是 x 轴方向,水平向右
- 默认侧轴方向就是 y 轴方向,垂直向下
- flex-direction 属性决定主轴的方向(即项目的排列方向)
- 注意:主轴和侧轴是会变化的,就看 flex-direction 设置为主轴,剩下的就是侧轴,而我们的子元素是跟着主轴来排列的
属性值 | 解释说明 |
---|---|
row | 默认值从左到右 |
row-reverse | 从右到左 |
column | 从上到下 |
column-revese | 从上到下 |
div {
display: flex;
width: 400px;
height: 400px;
background-color: blanchedalmond;
/* 默认主轴是水平从左往右 */
/* flex-direction: row; */
/* 主轴 水平从右往左 */
/* flex-direction: row-reverse; */
/* 主轴为垂直从上往下 */
/* flex-direction: column; */
flex-direction: column-reverse;
}
span {
width: 100px;
height: 100px;
margin-right: 10px;
background-color: skyblue;
}
②、 justify-content:主轴上的子元素排列方式
- justify-content 属性定义了项目在主轴上的对齐方式
- 注意:使用这个属性之前一定要确定好主轴是哪个
属性值 | 解释说明 |
---|---|
flex-start | 默认值从头部开始,如果主轴是 X 轴,则从左到右 |
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐,如果主轴是 X 轴,水平居中 |
space-around | 平分剩余空间 |
space-between | 先两边贴边 在平分剩余空间(重要) |
③、flex-wrap:子元素是否换行
- 默认情况下,项目都排在一条线(又称"轴线")上
- flex-wrap属性定义,flex布局中默认是不换行的
属性值 | 解释说明 |
---|---|
nowrap | 默认值,不换行 |
wrap | 换行 |
④、align-content:侧轴上的子元素的排列方式 (多行)
- 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行),在单行下没有效果
属性值 | 解释说明 |
---|---|
flex-start | 在侧轴的头部开始排列 |
flex-end | 在侧轴的尾部开始排列 |
center | 在侧轴中间显示 |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布在两头,在平分剩余空间 |
stretch | 设置子项元素高度平分父元素高度 |
⑤、align-items:侧轴上的子元素的排列方式 (单行)
- 该属性是控制子项在侧轴(默认是 y 轴) 上的排列方式
- 在子项为单项(单行)的时候使用
属性 | 解释说明 |
---|---|
flex-start | 默认值从上到下 |
flex-end | 从下到上 |
center | 挤在一起居中(垂直居中) |
stretch | 拉伸 |
⑥、flex-flow
- flex-flow 属性是复合属性, flex-direction 和 flex-wrap 属性的复合属性
- flex-flow: row nowrap;
3、flex布局子项常见属性
- flex 子项目占的分数
- align-self 控制子项自己在侧轴的排列方式
- order 属性定义子项的排列顺序 (前后顺序)
①、flex 属性
- flex 属性定义项目分配父盒子的剩余空间,用 flex 来表示占多少分数
- 属性值为数字,数字为1,表示占总份数中的1 份,默认值为0
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 60%;
height: 80px;
margin: 50px auto;
background-color: skyblue;
}
section div:nth-child(1), section div:nth-child(3) {
width: 80px;
height: 80px;
background-color: slateblue;
}
section div:nth-child(2) {
flex: 1;
height: 80px;
background-color: tomato;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
②、align-self 控制子项自己在侧轴的排列方式
- align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性
- 默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch
div {
display: flex;
width: 400px;
height: 400px;
background-color: blanchedalmond;
justify-content: center;
align-content: flex-start;
}
span {
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
background-color: skyblue;
}
span:nth-child(2) {
align-self: flex-end;
}
③、order 属性定义子项的排列顺序
- 数值越小,排列越靠前,默认值为 0
- 注意:和 z-index 不一样
span:nth-child(2) {
/* 调整子项加载的顺序,默认值是 0,如果想往前提,属性值可以为负数 */
order: -1;
/* 如果前面的元素想往后移,属性值要比前面都大 */
}
六、rem 基础
1、rem 单位
- rem (root em) 是一个相对单位,类似于 em,em 是父元素字体大小
- 不同的是 rem 的基准是相对于 <html> 元素的字体大小
- 比如,根元素 html 设置 font-size: 12px; 非根元素设置 width:2rem;转换成px表示就是 24px
- rem 的优势:父元素文字大小可能不一致,但是整个页面只有一个 <html>,可以很好的来控制整个页面的元素大小比例
* {
margin: 0;
padding: 0;
}
html {
font-size: 20px;
}
.box {
/* width: 200px;
height: 200px; */
width: 10rem;
height: 10rem;
background-color: skyblue;
font-size: 20px;
}
.box p {
/* em:相对单位,参考的是父级元素的字号大小的倍数,如果是 2em 表示字号的两倍 */
/* width: 5em;
height: 4em; */
/* rem: 相对单位,参考的是根元素 html 的字号大小的倍数,如果是 2rem 表示 html 元素字号的 2 倍 */
width: 5rem;
height: 4rem;
background-color: thistle;
}
2、媒体查询
媒体查询(Media Query) 是 CSS3新语法
- 使用 @media 查询,可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机,平板等设置都用得到多媒体查询
语法规范
- 用 @media 开头,注意 @ 符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性,必须有小括号包含
①、mediatype 媒体类型
- 将不同的终端设备划分成不同的类型,称为媒体类型
值 | 解释说明 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等 |
②、关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
- and:可以将多个媒体特性连接到一起,相当于 “且” 的意思
- not:排除某个媒体特性,相当于 “非” 的意思,可以省略
- or:可以测试多个媒体查询的条件,只要有一个条件成立,就执行, “或” 的意思
- obly:指定某个特定的媒体类型,可以省略
③、媒体特性
- 每种媒体类型都具有各自不同的,根据不同的媒体类型的媒体特性设置不同的战士风格
值 | 解释说明 |
---|---|
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域宽度 |
max-width | 定义输出设备中页面最大可见区域宽度 |
/* m媒体查询:@media 媒体类型 关键字 媒体特性 */
/* 在屏幕设备中,判断屏幕尺寸大等于 800px 的时候,最小宽度是 800px */
@media screen and (min-width: 800px) {
body {
background-color: skyblue;
}
}
/* 媒体查询可以写多个 */
@media screen and (max-width:600px) {
body {
background-color: sandybrown;
}
}
④、引入资源
- 当样式比较繁多的时候,我们可以针对不同的媒体使不同的媒体使用不同 stylesheets (样式表)
- 原理,就是直接在 <link> 中判断设备的尺寸,然后引用不同的 css 文件
- 语法规范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
- 示例
<link rel="stylesheet" media="mediatype and (min-width:200px)" href="styleA.css">
3、媒体查询 + rem
- rem 单位是跟着 html 走的,有了 rem 页面元素可以设置不同大小尺寸
- 媒体查询可以根据不同设备宽度来修改样式
- 媒体查询 + rem 就可以实现不同设备宽度,实现页面元素大小的动态变化
* {
margin: 0;
padding: 0;
}
/* rem 单位 */
/* 默认的 html 字号 */
html {
font-size: 20px;
}
/* p屏幕小于 640px 是,让 html 的字号为20px,大于等于 640px html 字号为30px */
/* @media screen and (max-width: 639px) {
html {
font-size: 20px;
}
} */
@media screen and (min-width: 640px) {
html {
font-size: 30px;
}
}
.box {
width: 100%;
height: 3rem;
background-color: skyblue;
font-size: 1.5rem;
line-height: 3rem;
color: #fff;
font-weight: bold;
text-align: center;
}
4、rem 适配原理
①、rem 适配方案 思考
- 我们适配的目标是什么?
- 怎么去达到这个目标的?
- 在实际的开发当中使用?
答案
- 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
- 使用媒体查询根据不用设备按比例设置 html 的字体大小,然后页面元素使用 rem 做尺寸单位,当 html 字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配
②、rem 实际开发适配方案
- 1、按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小;( 媒体查询 )
- 2、css 中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为 rem 单位的值
rem 适配方案技术使用( 市场 )
- 技术方案 1
- less
- 媒体查询
- rem
- 技术方案 2
- flexible.js
- rem
两种方案现在都存在,方案 2 更简单,现阶段无需了解里面的 js 代码
Ⅰ、rem 实际开发适配方案
rem + 媒体查询 + less 技术
- 1、设计稿常见尺寸宽度
设备 常见宽度 iphone4.5 640px ipgone 678 750px Android 常见 320px、480px、540px、600px、720px、768px、800px、1080px
目前常见市场主流设备尺寸按照 1080px 设计
一般情况下,我们以一套或两套效果图石适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果,现在基本以 750 为准
动态设置 html 标签 font-size 大小
- 假设设计稿是 750px
- 假设把整个屏幕划分为 15 等份(划分标准不一定是 20份也可以是10等份)
- 每一份作为 html 字体大小,这里就是 50px
- 那么在 320px 设备的时候,字体大小为 320 / 15 就是 21.33px
- 用我们的页面元素的大小 除以 不同的 html 字体大小会发现他们比例还是相同的
比如以 750 为标准设计稿
- 一个 100 *100 像素的页面在 750 屏幕下,就是 100 / 50 转换为 rem 是 2rem * 2rem 比例是 1 比 1
- 在 320 屏幕下,html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66, 但是宽和高的比例还是 1 比 1
- 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
/* 媒体查询设置不同屏幕下的 html 的字号 */
/* 设计图参考 750px */
/* 将屏幕宽度划分为 15份 */
/* 字号 = 屏幕宽度 / 15 */
@media screen and (min-width: 320px) {
html {
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 50px
}
}
/* 设置页面中元素大小时,参考 750px 屏幕的字号 */
/* 宽高为 100*100 px 的盒子 */
.box {
width: 2rem;
height: 2rem;
background-color: sandybrown;
}
元素大小取值方法
- 最后的公式:页面元素的 rem 值 = 页面元素值 (px) / (屏幕宽度/划分的份数)
- 屏幕宽度 / 划分的份数就是 html font-size 的大小
- 或者:页面元素的 rem 值 = 页面元素值 (px) / html font-size 字体大小
七、less 基础
1、维护 css 的弊端
css 是一门非程序式语言,没有变量、函数、SCOPE (作用域) 概念
- css 需要书写大量看似没有逻辑的代码,css 冗余度是比较高的
- 不方便维护及扩展,不利于服用
- css 没有很好的计算能力
- 非前端开发工程师来讲,往往会因为缺少 css 编写经验而很难写出组织良好有易于维护的 css 代码项目
2、Less 介绍
- Less ( Leaner Style Sheets 的缩写) 是一门 css 扩展语言,也称为 css 预处理器
- 做为 css 的一种形式的扩展,它并没有减少 css 的功能,而是在现有的 css 语法上,为 css 加入程序式语言的特性
- 它在 css 的语法基础上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 css 的编写,并且降低了 css 的维护成本,就像它的名称所说的那样, less 可以让我们用更少的代码做更多的事情
Less 中文网址:http://lesscss/
常见的 css 预处理器:Sass、Less、Stylus
3、Less 安装
- 安装 nodejs,可选择最新的版本,网址:https://nodejs/zh-cn/download/
- 检查是否安装成,使用 cmd 命令,输入 node -v 查看版本即可
- 基于 node.js 在线安装 Less,使用 cmd 命令 npm install -g less
- 检查是否安装,使用 cmd 命令 less -v 查看版本即可
4、Less 使用
首先新建一个后缀名为.less 的文件,在这个文件里书写 less 语句
①、Less 变量
- 变量是指没有固定的值,可以动态改变的,因为我们 css 中的一些颜色和数值经常使用
- @变量名:值;
Ⅰ、变量名命名规范
- 必须有 @ 为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
- @color:pink;
Ⅱ、变量使用规范
/*直接使用*/
body {
color: @color;
}
a:hover {
color:@color;
}
②、Less 编译
- 本质上,Less 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 css 文件
- 所以,我们需要把我们的 .less 文件,编译生成为 .css 文件,这样我们的 html 页面才能使用
- 推荐方法 (node.js): 在当前文件夹,使用 cmd 命令 lessc style.css>style.css
VS Code Less 插件
- Easy Less 插件用来把 less 文件编译为 css 文件
- 安装完毕插件,重新加载 vscode
- 只要保存一下 Less 文件,会自动生成 css 文件
③、Less 嵌套
- 经常用的选择器
#header .logo {
width: 20px;
}
- Less 嵌套写法
#header {
.logo {
width: 20px;
}
}
如果遇见( 交集| 伪类| 伪元素选择器 )
- 内层选择器的前面没有 & 符号,则它被解析为父选择器的后代
- 如果有 & 符号,它就被解析为父元素自身或父元素的伪类
a:hover {
color: red;
}
a {
&:hover {
color: red;
}
}
④、Less 运算
- 任何数字、颜色或者变量都可以参与运算,Less 提供了加(+)、-、*、/ 算数运算
注意
- (*) 和 (/) 的写法
- 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位,则运算结果就取该单位
- 运算符中间左右有个空格隔开 1px + 5rem
// less 运算
@baseFont: 50px;
html {
font-size: @baseFont;
}
div {
// rem 的单位
width: 200rem / @baseFont;
height: 300rem / @baseFont;
background-color: #999;
}
// div {
// width: 200px + 50px;
// height: 200px * 1.5;
// background-color: #999;
// }
// 1、参与运算的两个数字,可以一个有单位,一个没有单位,最终单位就是唯一的那个单位
// 2、参与运算的两个数字,两个都有单位,最终单位取第一个数字的单位
// 3、less的运算符中间左右必须加空格隔开
八、响应式开发
1、了解响应式开发原理
①、响应式开发原理
- 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的
设备划分 | 尺寸之间 |
---|---|
超小屏幕 (手机) | <768px |
小屏设备(平板) | >=768px ~ 992px |
中等屏幕(桌面显示器) | >=992px ~ <1200px |
宽屏设备(大桌面显示器) | >=1200px |
②、响应式布局容器
- 响应式需要一个父级做为布局容器,来配合自己元素来实现变化效果
- 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,在改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面和样式变化
平时的响应式尺寸划分
- 超小屏幕(手机,<768px): 设置宽度为 100%
- 小屏幕(平板,>=768px): 设置宽度为 750px
- 中等屏幕(桌面显示器,>= 992px): 宽度设置为 970ppx
- 大屏幕(大桌面显示器,>=1200px): 宽度设置为 1170px
但是也可以根据实际情况自己定义划分
* {
margin: 0;
padding: 0;
}
.nav {
width: 800px;
margin: 0 auto;
background-color: greenyellow;
overflow: hidden;
list-style: none;
}
.nav li {
float: left;
width: 100px;
height: 30px;
font-size: 16px;
text-align: center;
line-height: 30px;
color: #fff;
}
/* 在小屏幕中要更改 nav 容器的宽度,以及元素的排列方式 */
@media screen and (max-width: 799px){
.nav {
width: 100%;
}
.nav li {
width: 33.33%;
}
}
2、Bootstrap
中文官网:https://www.bootcss/
官方文档:https://v3.bootcss/css/#overview
①、Bootstrap 使用方法
Ⅰ、Bootstrap 使用四部曲
- 创建文件夹结构
- 创建 html 骨架结构
- 引入相关样式文件
- 书写内容
Ⅱ、创建 html 骨架结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 要求当前网页使用 IE 浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口的设置:视口的宽度和设备一直,默认的缩放比例和PC端一直,用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<!-- 解决 ie9 一下浏览器对 html5 新增标签的不识别,并导致 css不起作用的问题 -->
<!-- 解决 ie9 一下浏览器对 css3 Media Query 的不识别 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- bootstrap 核心样式 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
</body>
</html>
Ⅲ、引入相关样式文件
<!-- bootstrap 核心样式 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
Ⅳ、书写内容
- 直接拿 Bootstrap 预先定义好的样式来使用
- 修改 Bootstrap 原来的样式,注意权重问题
- 学号 Bootstrap 的关键在于知道它定义了那些样式,以及这些样式能实现什么样的效果
button.my_button{
background-color: hotpink;
}
<button type="button" class="btn btn-primary "> 默认按钮 </button>
<button type="button" class="btn btn-primary my_button"> 修改按钮 </button>
②、Bootstrap 布局容器
Bootstrap 需要为页面内容和栅(shan)格系统包裹一个 .container 容器,它提供了两个作此用处的类
Ⅰ、container 类
- 响应式布局的容器 固定宽度
- 大屏 ( >=1200px )宽度定为 1170px
- 中屏( >=992px )宽度定为 970px
- 小屏( >=768px )宽度定为 750px
- 超小屏(100%)
<div class="container">container</div>
Ⅱ、container-fluid 类
- 流式布局容器 百分比宽度
- 占据全部视口 ( viewport ) 的容器
- 适用于制作移动端页面开发
<div class="container-fluid">container-fluid</div>
③、栅格系统
- 栅格系统,也叫做 “网格系统”,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局
- Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口 ( viewport ) 尺寸的增加,系统会自动分为最多 12 列
Ⅰ、栅格选项参数
栅格系统用于通过一系列的行 ( row ) 与列 ( colimn ) 的组合来创建页面布局,那你的内容就可以放入这些创建好的布局中
超小屏幕(手机) < 768px | 小屏设备(平板) >= 768px | 中等屏幕(桌面显示器) >= 992px | 宽屏设备(大桌面显示器) >=1200px | |
---|---|---|---|---|
.container 最大宽度 | 自动(100%) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | ,col-lg- |
列 ( column) 数 | 12 | 12 | 12 | 12 |
- 按照不同屏幕划分为 1~12 等份
- 行(row)可以去除父容器作用 15px 的边距
- xs-extra samll:超小;sm-small:小;md-medium:中等;lg-large:大;
- 列(column)大于 12,多余的 " 列 ( column )" 所在的元素将作为一个整体另起一行排列
- 每一列默认有左右 15px 的 padding
- 可以同时为一列指定多个设备的类名,以便划分不同份数,例如 class=“col-md-4 col-sm-6”
<div class="container">
<div class="row">
<!-- 内部添加 4 个元素 -->
<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>
<div class="row">
<!-- 内部添加 4 个元素 -->
<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 份,会留一些空白 -->
<div class="row">
<!-- 内部添加 4 个元素 -->
<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">
<!-- 内部添加 4 个元素 -->
<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-4">4</div>
</div>
<div class="row">
<!-- 内部添加 4 个元素 -->
<div class="col-lg-3 col-md-6">1</div>
<div class="col-lg-3 col-md-6">2</div>
<div class="col-lg-3 col-md-6">3</div>
<div class="col-lg-3 col-md-6">4</div>
</div>
</div>
Ⅱ、列嵌套
栅格系统内置的栅格系统将内容再次嵌套,也就是一个列内在分成若干份小列,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
<div class="container">
<div class="row">
<!-- 内部添加 4 个元素 -->
<div class="col-lg-4 row">
<!-- 嵌套一个新的栅格系统 -->
<p class="col-lg-6">1</p>
<p class="col-lg-6">2</p>
</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
</div>
</div>
Ⅲ、列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移,这些实际是通过使用 * 选择器为当前元素增加了左侧的边距 ( margin )
<div class="container">
<div class="row">
<div class="col-lg-4">左侧</div>
<div class="col-lg-4 col-lg-offset-4">右侧</div>
<div class="col-lg-8 col-lg-offset-2">3</div>
</div>
</div>
Ⅳ、列排序
通过使用 .col-md-push-* 往右推和 .col-md-pull-* 往左拉两个类就可以容易的改变列 ( column ) 的顺序
<div class="container">
<div class="row">
<!-- 左侧元素往后推 8 份位置 -->
<div class="col-lg-4 col-lg-push-8">左侧</div>
<!-- 右侧元素往前拉 4 份位置 -->
<div class="col-lg-8 col-lg-pull-4">右侧</div>
<div class="col-lg-8 col-lg-push-2">3</div>
</div>
</div>
④、响应式工具
- 为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
类名 | 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面 (≥992px) | 大屏幕 桌面 (≥1200px) |
---|---|---|---|---|
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
- 与之相反的,.visible-xs-* ,.visible-sm-* ,.visible-md-* ,.visible-lg-* 是针对不同设备显示某个内容
- 其他多看看官方文档
<div class="container">
<div class="row">
<!-- 在小屏幕进行隐藏 -->
<div class="col-lg-4 hidden-sm">1</div>
<div class="col-lg-8">2</div>
<!-- 在大屏幕进行显示,其他屏幕隐藏 -->
<div class="col-lg-8 visible-lg">3</div>
</div>
</div>
更多推荐
移动端开发基础了解
发布评论