pc端rem适配_flex布局&rem布局&less

传统布局

• 兼容性好

• 布局繁琐

• 局限性，不能在移动端很好的布局

flex布局

• 操作方便，布局极其简单，移动端使用比较广泛

• PC端浏览器支持情况比较差

• IE11或更低版本不支持flex或仅支持部分

• 如果是PC端页面布局，还是采用传统方式

• 如果是移动端或者是不考虑兼容的PC则采用flex

flex布局原理

• flex是flexible box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

• 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效

• flex布局又叫伸缩布局、弹性布局、伸缩布局、弹性盒子布局

• 采用flex布局的元素称为flex容器(flex container)简称容器，它的所有子元素自动成为容器成员，称为(flex item)“项目”

总之：就是通过给父盒子添加flex属性，来控制盒子的位置和排列方式

父项常见属性

flex-direction：//设置主轴的方向justify-content：  //设置主轴上的子元素排列方式flex-wrap：//设置子元素是否换行align-content：//设置侧轴上的子元素的排列方式(多行)align-items：  //设置侧轴上的子元素排列方式(单行)flex-flow：//复合属性，相当于同时设置了flex-direction和flex-wrap

rem单位(root em)是一个相对单位，类似于em，em是父元素字体大小。例如根元素html：font-size=12px，则非根元素font-size：2rem就是24px

rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

媒体查询(media query)是CSS3的新语法

• 使用@media查询，可以针对不同的媒体查询类型定义不同的样式

• @可以针对不同的屏幕尺寸设置不同的样式

• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

• 目前针对很多苹果手机，Android手机，平板等设备都用得到多媒体查询

语法规范

• 用@media开头

• mediatype媒体类型

• 关键字and not only

• media feature 媒体特征必须有小括号含

@media mediatype and not only(media feature){css code；}//mediatype 查询类型all  //用于所有设备print  //用于打印机和打印预览scree  //用于电脑屏幕、平板电脑、智能手机等//关键字，将媒体类型或多个媒体特性连接到一起做为媒体查询的条件and  //连接多个媒体“且”not  //排除某个媒体“非”only  //指定某个特定的媒体，可以省略//媒体特性width  //定义输出设备中页面可见区域宽度min-width  //定义输出设备中页面最小可见宽度max-width  //最大可见宽度

书写规则

从小到大写或从大到小写，但习惯从小到大写。

less介绍

是一门css扩展预处理器。在css的语法基础之上，引入了变量，mixin(混入)。运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本。

中文网址：

http：//lesscss.cn///常见的css预处理器：sass、less、stylus

less安装

• 安装Node.js

• http：//nodejs.cn/download/

  检查是否安装成功，使用cmd命令，输入node -v查看版本即可

• 基于nodejs在线less，使用cmd命令“npm。install -g less”

• 检查是否安装成功，使用“lessc -v”查看版本即可

less变量

@变量名：值；

• 必须有@为前缀

• 不能包含特殊字符

• 不能以数字开头

• 大小写敏感

less编译 vscodeless插件

easy less插件用来把less文件编译为css，安装好后，只要保存一下less文件，会自动生成css文件。

less运算

任何数字，颜色或者变量都可以参与运算，less提供了加减乘除运算。

rem适配方案

• 让一些不能等比适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备

• 使用媒体查询根据不同的设备按比例设置HTML的字体大小，然后页面使用rem做尺寸单位，当HTML字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。

vscode px转换rem的插件cssrem，默认插件的16转换，需要自己手动配置。