[前端学习]移动web部分学习笔记，第二天

网页布局方法总结：

• 目前已经学习了两种布局方式：
  • 固定宽度布局：常见于PC端，设定固定的宽度作为版心来布局
  • 流式布局：常见于移动端，所有宽度不固定，采用相对参照的方式，用百分比来设置
• 接下来还要接触两种布局方式：
  • 栅格式布局：这种布局方式被bootstrap框架使用，主要思路是让整个页面分为多个均宽等份。某个元素设置宽度时，让它占有几个等份，而不是直接设置宽度
  • 响应式布局：很流行的布局方式，自动检测设备宽度来布局，就是说不同分辨率设备访问同一网页，看到的布局方式可能会有不同，达到一个页面可以适配多种设备
• 注意：每次布局方式都有其可取之处，所以这几种布局方式不应该单独存在，往往是根据实际情况结合使用

响应式布局介绍

• 核心概念：使用媒体查询来获取设备的宽度，然后根据宽度来设置不同的css样式，实现响应式布局
• 优点：响应式布局可以使网页在不同的设备上都能完美的展现，提高用户的浏览体验
• 缺点：正因为需要对不同设备设置不同的css样式，所以不得不利用媒体查询书写大量的代码来进行适配。代码冗余过多页面体积太大，就会造成严重的性能消耗
• 应用场景：根据上述优缺点可以知道，响应式开发一般主要用在企业官网、博客、资讯网站等，以浏览展示内容为主没有太多复杂交互的网站。这样才能在提高用户体验的情况下，尽量减少性能消耗
• 设备宽度划分建议：
  • 大屏设备 w>=1200px
  • 中等屏幕 992px<=w<1200px
  • 小屏设备 768px<=w<992px
  • 超小屏幕 w<768px

响应式开发

• 移动web开发和响应式开发是前端人员的必备技能
• 在以前为了适配移动端，通常是专门为移动端做一套新的页面。但是现在移动设备越来越多，如果每种设备都做一套页面开发成本太大。所以正常情况下，现在新做一个网站，优先都会考虑到响应式开发

媒体查询

• 媒体查询的作用是设置不同屏幕宽度下的样式
• 基础语法：
  • @media mediatype and|not|only (media feature) {
CSS-Code;
}
  • mediatype规定用于哪种设备，例如：要应用于电脑屏幕，平板电脑，智能手机等，就写screen
  • and|not|only是作为连接条件判断的关键字，最常用的是and。not是取反值(不在范围内才应用，几乎用不到)
  • media feature条件判断，例如：写min-width: 1200px，是限制页面宽度最小不能低于1200px，也就是说必须大于或等于1200px才能应用内部的css样式
  • 还有很多属性值，查阅手册
• 条件判断的知识点：
  • 当你用媒体查询来设置css样式时，必然会有条件判断，根据满足不同条件应用不同样式
  • 书写建议：
    • 如果判断的是最小值min-width，那么判断值需要按照从小到大的顺序写(推荐，因为bootstrap就是用的这个方式)
    • 如果判断的是最大值max-width，那么判断值需要按照从大到小的顺序写
  • 不同类型屏幕肯定是有个值的范围区间(例如768<宽度<992)。但是实际书写中，只要满足上面两种情况的宽度值判断。那么一个就行了(对应判断的最大最小)，不用写完整的区间
• 媒体查询特性：
  • 向上兼容：宽度值更小的设置，默认会传递到宽度值更大的设置中去
  • 向下覆盖：宽度值更大的设置会覆盖宽度值小的设置
  • 解释：就是说如果你只写了宽度值小的设置，那么它的向上兼容会默认往上传递，在宽度值更大没写的情况下，会应用小的设置。但是一旦写了宽度值大的设置，那么它向下覆盖会覆盖掉传递过来的设置，这样宽度值小的设置就只会在其范围内应用，宽度值大的设置也是。这也是为什么不用写完整范围区间的原因。
  • 注意：如果写了完整范围区间，这两个特性不会生效
• 媒体功能知识点
  • 媒体功能就是条件判断的关键字(比如：min-width、min-device-width)，这里说明一下有device和没有device的区别
  • 有device的时候，它获取的宽度值是设备的宽度值，重点：因为pc端设备宽度不会随着浏览器伸缩而改变，所以你就算写多个条件判断，也只有满足当前设备宽度值的css样式才会生效。一般来说，如果只针对移动端做媒体查询，那么才建议用有device的媒体功能
  • 没有device的时候，它获取的是可视区域的宽度(也可以理解为页面宽度)，这个不管移动端还是pc端，只要伸缩浏览器页面宽度值就会变化，所以不存在上面说的问题。如果要兼顾pc端和移动端，那么建议用没有device的媒体功能
• 补充说明
  • 媒体查询不光可以在内部写直接css样式，也可以通过它来引入不同的css样式表
  • 写法：<link rel="stylesheet" media="mediatype and|not|only (media feature) " href="xxx.css" />
  • 如果满足条件判断，就会引入对应的样式表文件

响应式开发框架

• 因为web开发越来越复杂，所以有人将比较常用的功能模块组件化(轮播图、导航栏、选项卡等)，然后将一系列的组件封装，就形成了css框架。现在框架有非常多，比如：bootstrap、amazeUi、Framework7等等。最受欢迎当属bootstrap

Bootstrap

• 关于bootstrap的使用方法，中文网已经有详细说明，不作赘述
• 这里着重说明下，bootstrap的布局核心概念：栅格式布局
  • 栅格式布局是流式布局，即：从左往右，从上到下
  • 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，首先行必须包含在 .container （根据不同设备宽度先设置好的固定宽度）或.container-fluid （100% 宽度）容器中
  • 然后在容器添加“行（row）”
  • 再通过“行（row）”在水平方向创建一组“列（column）”，默认情况下行被分为12等份栅格，不设置的话一个列占据一份栅格
  • 通过.col-(xs||sm||md||lg)-x(数字)这种预定义的类，就可以设置每个列到底占据多少个栅格(即宽度)
  • xs表示超小屏幕下占据几个栅格，sm表示小屏幕下占据几个栅格，同理。md表示中屏幕，lg表示大屏幕。这其实就跟响应式一样，根据不同宽度设置不同样式。不过框架封装好了，不用再去写媒体查询。可以不用全屏幕类都写，但要注意向上兼容和向下覆盖的特性
  • 还有一些栅格相关的样式：列偏移offset，列排序push||pull，列嵌套，隐藏类hidden等，可以看中文网了解，上面都有详细说明介绍
• 另外如果想定制bootstrap的一些设置，比如：每行分为多少等份这类的，中文网上也有详细说明
• 总而言之就是多看文档

Less

• less是一种动态的样式表语言，通过简洁的语法让css编写更加简单。注意：less既然是一种语言，那么就其专门的语法。并且浏览器不能解析less文件，所以less实质上是一套语法和编译器组成的
• 必备环境搭建：
  • 首先必须安装了node以及npm
  • 然后通过命令行输入npm install -g less就能在全局环境下安装less，通过lessc -v指令能检测是否安装成功
  • 手动编译less文件，需要先用命令行进入less文件所在目录，然后输入lessc xxx.less xxx.css，前一个是需要编译的文件，后一个是需要变成生产的css文件
  • 一般来说代码编辑器都有自动编译功能，比如vscode，只要搭建好了环境，再安装一个easyless插件，就能自动编译less文件
• 语法简单介绍
  • 变量：@变量名:值通过@符号来声明变量，并赋值。在写css样式时，该变量就可以作为样式的属性值来使用
  • 混入(也叫混合，相当于函数)：
    • .example { xxx: xxx}这是一个正常的样式，在less可以样式复用。如果想要使用与这个类名相同的样式，直接在大括号内写类名即可。例如：.example2 { xxx: xxx; .example}，这里混入类名的样式，就会自动被编译到新的类名中
    • 并且还可以跟函数一样设置默认参数：.example(@a:10px) { xxx: @a}，这时混入类名，可以这样写.example2 { xxx: xxx; .example(xx)}。这个参数可以根据自己需要来传入，如果不写参数那么就会使用默认值10px
  • 嵌套。用法时不用再多次写类名结构，而是父元素大括号内部，直接写子元素的类名。如果什么都不写编译后是后代选择器，加上>符号编译后就是子选择器。另外注意：如果要再当前元素内部写它的伪类和伪元素，必须加上&符号。
• 下面是个简单的例子：
  • div {
color: @baseColor; //用变量来设置值
.header(); //混入复用之前写好的.header的样式，不写参数使用默认值
>p { //给直接子元素p设置样式
font-size: 16px;
}
a { //给所有后代a标签设置样式
text-decoration: none;
}
&::before { //为其伪元素设置样式
content: "";
}
}
• 另外如果想注释也一起编译，需要使用/**/这种注释符才行。less也支持@import在样式文件中，引入其他样式文件
• 如果想不编译直接引入less文件也有办法，如下：
  • 1.与引入css文件大致相同<link type="stylesheet/less" href="./xx/xx/xx.less" />
  • 2.引入专门解析less的js文件<script src="./xx/xx/less.js" ></script>
• 更多语法看中文手册

rem的介绍

• rem是css3中新增的一种大小单位，类似于以前的em，都是以元素的字号作为参照方式
• em和rem的区别
  • em优先参照当前元素的字号，如果当前元素没有设置，就参照父容器或者浏览器默认字号(每个浏览器都是有默认字体大小的)
  • rem是参照根元素的字号(html)，如果根元素没有设置就参照浏览器默认字号
• rem的优点
  • 相对em而言，如果当前元素需要设置字体大小，那么em的大小实际上就是被定死了。而rem要灵活很多，因为给当前元素设置字号并不会影响rem。在网站开发中也推荐使用rem
• 常见使用场景：
  • 开发中ui给我们的稿件尺寸都是行业通用的尺寸，但是手机屏幕的宽度各式各样，为了使展示效果更好，一般是同比例的缩小或者放大具体元素，使整个页面的总体比例不变
  • 思维模式跟栅格式系统很像。不管是什么尺寸的图片，首先把它分为x份(自定义)等份。那么每个元素再该图中占据的份数是可以知道的。然后不管什么手机设备，也把它分为x份等份(必须与稿件相同)。算出每份的值，再把值设置为根元素字号，那么就可以通过rem来设置大小了。
  • 虽然不同屏幕分出来的值可能不同，但是通过rem设置它的比例是相同的，就达到了想要的目的