使用rem单位布局的时候有什么好处_移动WEB开发之rem适配布局

最新推荐文章于 2024-06-28 12:01:16 发布

weixin_39579726

最新推荐文章于 2024-06-28 12:01:16 发布

阅读量403

点赞数

文章标签： REM布局媒体查询 Less预处理器响应式设计移动WEB开发

移动WEB开发之rem适配布局

rem单位
rem(root em)是一个相对单位，类似于em,em是父元素字体大小
em与rem的不同
rem的基准是相对于元素的字体大小例如：根元素html设置font-size=12px;非根元素设置width: 2rem;转换成px表示24px
rem的优势：父元素文字大小可能不一致，但是整个页面只有一个，可以很好的来控制整个页面的元素大小比例。
媒体查询
Media Query是css3新语法
- 使用@media查询，可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询

语法规范

@media开头
mediatype媒体类型
将不同的终端设备划分成不同的类型，称为媒体类型如下表所示：

值	解释说明
all	所有设备
print	打印机和打印预览
screen	电脑屏幕、平板电脑、智能手机等

关键字 and not or only
含义：将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。
1. and: 可以将多个媒体特性连接在一起，相当于“且”的意思
2. not: 排除某个媒体类型，相当于“非”的意思，可以省略
3. or: 可以测试多个媒体查询的条件，只要有一个条件成立，就执行，“或”的意思
4. only: 指定某个特定的媒体类型，可省略

1. media feature媒体特性必需有小括号包着 如下表所示：

值	解释说明
width	输出设备中页面可见区域的宽度
min-width	输出设备中页面最小可见区域宽度
max-width	输出设备中页面最大可见区域宽度

举例：
<!-- 注意：and后面一定要空格，不然显示不出来效果 -->  
 @media screen and (min-width: 600px;){  
    <!-- 内部和书写css样式的方法一样 -->        
    body {
             background-color: pink; 
          }
  }

* 案例：根据页面宽度改变背景变色

+ 实现思路： 1. 推荐：从小到大 2. 需要注意：最大值max-width 和最小值min-width都是包含等于的 3. 屏幕小于540像素，背景颜色为蓝色(x<=539) 4. 屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色(540 =< x >= 969) 5. 屏幕大于等于970像素的时候，背景颜色为红色(x >= 970)

* 总结：每个属性写完一定要打空格，例如：and后面要写空格，不然样式没法出来 * 媒体查询和rem实现元素变化 + rem单位是跟着来走的，有了rem页面元素可以设置不同大小尺寸 + 媒体查询可以根据不同设备宽度来修改样式 + 媒体查询+rem可以实现不同设备宽度，实现页面元素大小的动态变化 + 案例 * 引入资源(理解) + 在中判断设备的尺寸，然后引用不同的css文件

例如  <link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

Less基础
维护css的弊端
- css是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念
- css需要书写大量看似没有逻辑的代码，css冗余度是比较高的。
- 不方便维护及拓展，不利于复用
- css没有很好的计算能力
- 非前端开发工程师来讲，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目

Less介绍
- Less(Leaner Style Sheets)是一门CSS扩展语言，也成为CSS预处理器
- 作为CSS的一种形式的扩展，它并没有减少css的功能，而是现有的css语法上，为css加入程序式语言特性
- 在css的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了css的编写.并且降低了css的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情
- 中文网站: >http://lesscss.cn/
- 常见的css预处理器: Sass,Less,Stylus
- 总结:Less是一门css预处理语言,它拓展了css的动态特征
Less安装
- 步骤

安装nodejs https:// nodejs.org/en/download/

- 检查是否安装成功
  - 使用cmd命令(widows+r) ,输入"node-v"查看版本即可

- 基于node.js在线安装Less,使用cmd命令"npm install -g less"即可
- 检查是否安装成功,使用cmd命令"lessc-v"查看版本即可
Less使用
- Less变量(css中经常使用的一些颜色和数值等)
- @变量名:值
- 命名规范
  - 必须有@为前缀
  - 不包含特殊字符
  - 不能以数字开头
  - 大小写敏感

 变量使用规范  
  body {
         color: @color;       
  } 
  a:hover {
         color: @color;
  }

- Less编译
- 本质上,Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译成对应的css文件.
- 要把.less文件编译成.css文件,html页面才能使用
- 推荐方法: (node.js)在当前文件夹使用cmd命令"lessc style.less > style.css" 如图所示:

- VScode Less插件: Easy LESS 只要保存一下Less文件,会自动生成css文件
- Less嵌套
- 常见的嵌套

<!-- 常用的选择器 -->       
#header .logo {
         width: 300px;
       }       
<!-- Less嵌套写法 -->       
#header {
    .logo {
           width: 300px;
         }
     }

- 交集/伪类/伪元素选择器

内层选择器的前面没有&符号,则他被解析为父选择器的后代
如果有&符号,他就被解析为父元素自身或父元素的伪类.

例如: 
 <!-- 常用的选择器 -->   
a:hover {
           color: red;
         }         
<!-- Less嵌套写法 -->         
a {
     &:hover {
             color: red;
           }
   }