Cherish's Notebook
切换到深色模式
菜单
Wiki--浏览次数--访问次数--跳出率--平均停留

Html和CSS学习

自己正经开始学编程的第一门语言！

21. 移动端布局实战下篇

21.1 rem适配布局

21.1.1 rem单位

也就是父盒子font-size设置为12px的话，子盒子的font-size设为10em，则子盒子文字大小为120px

21.1.2 媒体查询

  1. 参数介绍
CODE
/* 媒体查询 */
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

媒体查询一般按照从大到小或者 从小到大的顺序来

  1. 引入资源

引入资源就是针对不同的屏幕尺寸 调用不同的css文件

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

  • rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
  • 媒体查询可以根据不同设备宽度来修改样式
  • 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

21.2 Less基础

css冗余度较高，不利于复用，没有很好的计算能力

Less可以解决该问题，它是css的扩展语言

Less中文网址： http://lesscss.cn/

Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性

21.2.1 less安装

如果使用vscode，则无需进行下方安装步骤

http://nodejs.cn/download/

21.2.2 less使用

我们首先新建一个后缀名为less的文件， 在这个less文件里面书写less语句

  1. Less 变量
  1. Less 编译
  1. Less 嵌套
  1. Less 运算

运算的时候不需要加单位，比如第一个+5之后就是宽度变为15px了

注意点：

  • 乘号（*）和除号（/）的写法
  • 运算符中间左右有个空格隔开 1px + 5
  • 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
  • 如果两个值之间只有一个值有单位，则运算结果就取该单位
  • 注意在进行除法运算时一定要加括号，不然无法运算！

21.3 rem 适配方案

① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小（媒体查询）

② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

21.3.1 rem 实际开发适配方案1

rem + 媒体查询 + less 技术

这里可以这样理解，这个屏幕分成15份，也就是说由15份的文字组成，750px页面上文字的大小就是50px，要保持比例相同，那么在320px屏幕上的文字应该也得保证有15个，每个文字的大小就是21.33px，文字的个数由自己来定，那么只需要将页面中的文字大小设置为这15个字大小的倍数就可以了，知道倍数之后就保证了在不同屏幕上的展示比例不变

也可以理解为获得设计网页html尺寸与手机不同类型屏幕尺寸的比例，这个比例就可以保证设计网页在手机屏幕尺寸的正常显示

写的时候每个元素都需要加（xxxrem / @baseFront）

例如：

index.html:

CODE
/* rem 适配方案 */
html {
  font-size: 62.5%;  /* 1rem = 10px */
}
.box {
  width: 10rem;  /* 100px */
}

common.less

CODE
html {
  font-size: 62.5%; /* 10px */
}
div {
  width: 10rem; /* 100px */
}
```Css
/* rem 适配方案 */
html {
  font-size: 62.5%;  /* 1rem = 10px */
}
.box {
  width: 10rem;  /* 100px */
}

html { font-size: 62.5%; /* 10px / } div { width: 10rem; / 100px */ }

CODE

初始化样式：normalize.css(直接复制下载即可)

```Css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

less保存时会自动变成.css文件

好好搞懂上述代码写法

21.3.2 样式导入样式

21.3.3 rem 适配方案2

  1. 准备工作

github地址：https://github.com/amfe/lib-flexible

下载之后，将index.js文件拖到项目中就可以了

js文件引入到index.html中使用的是<script src="js/flexible.js"></script>

  1. vscode插件

js这个flexible是将整个浏览页面设计成了10等分，也就是说按照750px的设计尺寸，body的大小为75px，所以body的宽度应为10rem，由于这里不在使用媒体查询，就没有最大界面限制了，所以给body设置为margin：0 auto;是不显示的，要加一个最大宽度，即max-width

在下面布局时每个盒子的大小都是依据html（手机的尺寸界面）来变的，都要转化成rem单位，每个宽度除75不好算，这个插件可以帮助我们来算，插件就是下面的效果

使用之前需要先修改一下html字体大小基准值，应该改为75px

修改成75就可以，alt+z为快捷键

index.css：

CODE
/* rem 适配方案 */
html {
  font-size: 62.5%;  /* 1rem = 10px */
}
.box {
  width: 10rem;  /* 100px */
}

index.html:

CODE
body {
  font-size: 16px;
}

21.4 响应式开发

他的开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

做法：

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

布局容器比页面稍微小一点是为了美观好看，由于小一点点，距离两边会有空隙，美观

21.4.1 简单代码示范

CODE
/* rem 适配方案 */
html {
  font-size: 62.5%;  /* 1rem = 10px */
}
.box {
  width: 10rem;  /* 100px */
}

父盒子一般命名为container

21.4.2 Bootstrap前端开发框架

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和JAVASCRIPT的，它简洁灵活，使得 Web 开发更加快捷

可以直接去官网拿现成的东西

  1. Bootstrap的使用

控制权在框架本身，使用者要按照框架所规定的某种规范进行开发

Bootstrap 使用四步曲：

1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容

打开Bootstrap官网，然后下载

这里边的小图标都是用类选择器写的，需要啥就复制这些类名就ok，它的效果就是给我们的标签创立了元素伪类选择器，使用的before,修改位置时，我们要对这个标签的元素伪类选择器来进行修改，只需要改变移动的量就可以，因为这个类的效果就已经进行了元素伪类选择器的设置

下载后会得到一个压缩包，然后解压一下，复制里边的js css fonts文件

在项目文件夹中新建一个bootstrap文件夹，然后将那些文件粘贴进去

CODE
.center {
  color: red;
}

<!--[if lt IE 9]> 是条件注释：如果小于 IE9，引入下边两个文件

bootstrap中的代码是通过类实现的，也就是说我们可以自己建立盒子，然后用他的类选择器，在微调，就可以实现自己想要的效果了，如果没效果，往往可能权重不够，加！important增加权重看看能否解决

bootstrap也是通过normalize.css进行初始化的，这说明在进行项目的时候不用再引入normalize.css这个文件进行了。bootstrap内部带有初始化的引入

  1. 布局容器

这样就可以不用媒体查询了，直接用类就可以实现（这个类选择器包含了不同屏幕尺寸的宽度，可以理解为这个里边对各个尺寸进行了从小到大的媒体查询，使用这个类就完全ok，不需要媒体查询）

container-fluid用于移动式布局比较方便

  1. bootstrap 栅格系统原理
  1. 栅格选项参数

.col-lg-3表示再大桌面显示器上每个盒子占三份，也就是4个小盒子各占四分之一

例如：

CODE
.center {
  color: red;
}

效果：

再强调一下：这个响应式布局可以实现一行内容如何分，在这个界面是这样分的，当缩小或放大一定页面就一行内容展示的可能变多，也可能变少，这就是响应式布局

然后总列份为12份，然后后边的数字就表示了占的列份，也就是占的宽度为多少

如果孩子的份数相加等于12， 则孩子能占满整个 container布局容器的宽度

如果孩子的份数相加小于12，则占不满整个container的宽度，会在右侧留有宽度

如果孩子的份数相加大于12，多余的那一列，会另起一行来显示

汇总展示说明：

CODE
<!-- HTML 代码示例 -->
<div class="example">
  示例内容
</div>

一行中的内容在不同页面展示不同个数的效果代码写法如下：

CODE
<!-- HTML 代码示例 -->
<div class="example">
  示例内容
</div>
  1. 列嵌套

我们列嵌套最好加1个行row，这样可以取消父元素的padding值 而且高度自动和父级一样高，此时就是每个子盒子的padding值了

没加row内部这样：

加上row之后内部为：

  1. 列偏移

不要用margin，如果用这个的话会导致响应式失效，我们要的就是在不同界面上变化不同，但是比例相同，还有margin的值也不好确定，不能值卡死，所以不要用padding!!!

要加偏移量，即偏移份数

偏移的份数=12-两个盒子的份数

  1. 列排序

pull拉左；push推右

  1. 响应式工具

与之相反的，是visible-xs visible-sm visible-md visible-lg是显示页面的内容

21.4.3 响应式小项目

在使用无序列表时可以通过对ul进行，取消li前边的点不用非得在li上进行操作，要知道继承性，反正要对ul进行操作了，所以直接给ul写就行，可以避免代码的冗余

ul {

list-style: none;

margin:0;

padding:0; }

要灵活用好浮动！！！，样式优先去网站上找类名，然后直接复制，提高自己开发的效率，当屏幕缩放内容改变的时候不要忘记媒体查询

结构：

CODE
.box {
  float: left;
}

样式：

CODE
.box {
  float: left;
}

21.5 swiper 插件使用

  • 下载需要的css和js文件html页面中 引入相关文件
  • 官网找到类似案例，复制html结构，css样式 js 语法
  • 根据需求定制修改模块

解压后将这两部分放到项目中

这个插件可以帮助我们实现轮播图效果

用法：

找到自己喜欢的

右键，查看网页源代码

复制人家的结构内容

然后去看API文档：

可以看看如何修改样式

现成的轮播图效果，直接需要啥取啥就行，然后再稍微进行修改即可