移动端web开发之rem适配布局

系列文章目录

---

1. 页面布局文字能够随着屏幕的大小变化而变化
2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置
3. 怎么样让屏幕发生变化时候元素高度和宽度等比例缩放

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

---

一、rem单位？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

1.引入库

代码如下（示例）：

 1. rem单位 
    rem是一个相对单位，类似于em,em是父元素的大小
    不同的是rem的基准是相对于html元素的字体大小
    比如，根元素（HTML）设置font-size=12px 非根元素设置width:2rem，则转换px表示24px
    
    

2.媒体查询

代码如下（示例）：

媒体查询是css3新的查询方法

 - 每次@nedia查询，可以针对不同的媒体类型定义不同的形式
 - @media可以针对不同的屏幕尺寸设置不同的样式
 - 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
 - 目前针对苹果手机，Android手机，平板等设备都用得到多媒体查询
语法规范
@media mediatype and|not|noly (media feature) {
CSS-Code;
}
 - 用@media开头注意@符号
 - nediatype媒体类型
 - 关键字 and not only 
 - medida feature 媒体特性必须是小括号包含
metype 查询类型 
和不同的终端设备划分成不同的类型，称为媒体查询
|all|用于所有设备  |
|print|用于打印机和打印预览|
| scree | 用于电脑屏幕，平板电脑 智能手表 用途最多 |
关键字
 - and 可以将多个多媒体待在连接在一起，相当于且的意思
 - not 排除每个媒体的类型，相当于非的意思，可以省略
 - only 指定某个特定的媒体类型，可以省略
媒体特征
| width | 定义输出设备中页面可见区域的宽度|
|min-width|定义输出设备中页面最小可见区域|
| max-width | 定义输出设备中页面最大区域宽度|

该处使用的url网络请求的数据。

---

引用资源
当样式繁多的时候，可以针对不同的媒体使用不同stylesheets（样式表）
原理，就是直接link中判断设备的尺寸，然后引用不同的css文件
<link rel="stylesheet" media="mediatype" and |not|only (media feature)" href="mystylesheet.css">

2.less

1、css弊端

 - 非程序化语言 没有变量、函数、作用域等概念、
 - css需要书写大量看似没有逻辑的代码，css冗余度比较高
 - 不方便维护及扩展，不利于复用
 - css没有很好的计算能力
 - 非前端往往会缺少css编写经验而很难写出组织良好且易于维护的css代码项目
 2、less介绍 
  
 -  css扩展语言
 - 引入变量 运算 函数等功能
 -安装less
	  1、安装node.js
	  2、检查安装是否成功，使用cmd命令。win10是window+r运行输入cmd 输入node-v检查版本即可
	  3、基于node.js在线安装less.使用cmd命令npm install -g less 即可
  检查安装是否成功使用cmd命令lessc-v检查版本即可
3、less使用
4、less变量
 - 首先先建一个后缀名为less的文件，less文件里面书写less语句
 - less变量 变量是指定没有固定的值，是可以改变的
 - @变量名：值
5、变量命名规范
   
 - 必须有@为前提
 - 不能包含特殊字符
 - 不能以数字开头
 - 大小写敏感
 6、使用
    @font12:12px;
    a {
    font-size:@front12;
     }
  7、less编译
     本质上less包含一套自定义语法和一个解析器，用户可以根据这些语法定义自己的样式规则，这些规则最终会通过解析器，生成对应的css文件
     需要把less文件编译成css文件，这样html页面才可以使用
 8、 vscode less 插件
   EasyLess插件可以把less文件编译为css文件
   只要保存一下less文件，自动生成css文件。
 9、less嵌套
   .header {
    width: 200px;
    height: 200px;
    background-color: rgb(192, 90, 90);
    /* 1、less嵌套 子元素样式直接写到父元素里面就行了 */
    a {
        color: cyan;
    }
}
还有交集|伪类|伪元素选择器
 - 内层选择器的前面没有&符号，则被解析为父选择器的后代
 - 如果有&符号，它被解析为父元素自身或者是父元素的伪类
 -   a {
        /* 如果是伪类|交集|伪元素选择器 我们内存选择器的前面添加& 
        是父元素的自身或者是父元素的伪类*/
        color: cyan;
        /* 如果没有&就是父元素的后代 */
       & :hover {
            color:darkslateblue;
        }
    }

}
.nav {
    .loga {
        color:darkgreen;
    }
    &::after {
        content: "";
    }
}
10、less运算
    任何数字、颜色、或者是变量都可以参与运算，less有加减乘除算术运算
    

 - 乘号 和除号 的写法
 - 运算符中间左右有个空格隔开1px +5
 -对于两个不同的单位的中间的运算，运算结果的值取第一个值的单
 位
 - 如果两个之间只有一个值有单位，则运算结果就取该单位
11、rem适配方案
    
 - 让一些不能等比自适应的元素，达到当前设备尺寸发生改变的时候，等比例适配当前设备
 - 使用媒体查询根据不同的设备按比例HTML的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小发生变化元素尺寸也会发生变化，从而达到等比例缩放的适配。
12、      rem实际开发适配方案
	   1、按照设计稿与设备宽度的比例，动态计算并设置html跟标签的font-size大小（媒体查询）
	   2、css中，设置稿元素的宽、高、相对位置等取值，按照等同比例换算为rem为单位的值
	rem适配方案技术使用
	
| 技术1 | 技术2|

|  less  |  flexible.js|
|媒体查询 |    rem      |
|  rem   |             |
两种方法在使用 但是方案2更简单

	   
 

rem实际开发适配方案1

13、rem+媒体查询+less  
	1、查询常见设计稿尺寸宽度 一般情况下，我们以一套或者两套效果图适应大部分的屏幕，放弃极端屏幕或对其降级，牺牲一些效果，现在基本以750px为准	  

 2、动态设置html标签font-size大小 
     
 - 假设设计稿是750px
 - 假设我们把整个屏幕划分为15等份（划分标准不一定可以20等份）
 - 每一份作为html字体大小，这里是50px
 - 在320px设备的时候，字体大小就是320/15就是21.33px
 - 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
 - 比如以750px为标准设计稿
 - 一个100*100像素的页面元素在750px屏幕下，就是100/50转换为rem是2rem*2rem 比例是1比1
 - 320屏幕中，html字体大小为21.33 则2rem=42.66px 但是宽和高的比例还是1比1
 - 但是已经实现不同屏幕下 页面元素盒子等比例缩放的效果
 - 
  元素大小取值方法
  
 - 最后公式：页面元素rem值=页面元素值（px）/(屏幕宽度/划分的份数)
 - 屏幕宽度/划分的份数 就是html font-size的大小
 - 或者：页面元素的rem值=页面元素值 （px）/html font-size 字体大小
   案例方案
   
 - 1、新建index.css，这里面写首页的样式
 - 2、将刚才设置好的common.less引入到index.less文件
 - 3、在index.less中导入到common.less文件
 -      @import "commom"
 - 4、生成index.css 引入到index.html里面

 
 
 
 
 
 

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。