CSS-移动端第二篇

本篇文章主要总结了移动端适配+less预处理+BootStrap框架

1. 移动适配

rem 相对单位
默认 1rem = 16px，只跟html的字体大小有关

如何计算

1.确定设计稿对应的设备的html标签的字体大小
2.rem = 你测量的值 / 基准字号(ui的设计稿来决定)
3.rem推荐我们把屏幕分成10份，1html=当前屏幕的10分之一

2. less预处理

1.css预处理器，less文件后缀.less
2.注释： // /**/
3.运算 + - * /

注意：/ 除法记得加小括号，因为编译会把它当路径来看
如果运算的值的单位各不相同，以第一个为准

less生成后代选择器

父选择器 {
    子选择器{
        
    }
}

less中的伪类和伪元素

&：hover {}
.box a:hover{}
.box {
    a {
        &:hover {}
    }
}

less变量定义

语法
1.定义变量 @变量名:变量值;
2.使用变量:变量名;
导入其他less文件
方法1： @import ‘less文件路径’;
方法1： @import url(less文件路径);
导出css文件
方法1 写在第一行 // out:../css/
方法2 配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
禁止导出
语法：// out:false;
不会生成css文件

vw/vh 相对单位

相对视口的尺寸自动计算结果
1vw = 1/100视口宽度
1vh= 1/100视口高度
实际开发中，只会使用其中一个
vmin 横屏和竖屏谁小就用谁
让屏幕在竖屏和横屏内容的大小保持一致
vmax 横屏和竖屏谁大就用谁

em
默认，1em=16px
与他的父元素或本身元素的字体大小有关，优先级：本身>父元素

3. 媒体查询

作用：能够检测视口宽度
语法：

@media (媒体查询特性) {
    css选择器 {
        font-size：20px;
    }
}
@media (width:375px) {
    css选择器 {
        font-size：20px; 
    }
}

​ max-width 表示对应值在区间以下 从大到小去写
​ min-width 表示对应值在区间以上 从小到大去写

4. BootStrap

快速开发响应式网页

使用步骤

​ 1.引入bootstrap.css
​ 2.调用固定类名

栅格系统

container：内容固定在中心，会自带15px的padding值
container-fluid：通栏00%，会自带15px的padding值
row 行：内补父元素内边距 通过设置左右的负外边距清除父元素内边距
col 列 每行12列，多的列会换行

大屏  >1200      col-lg-份数
中屏  >992        col-md-份数
小屏  >=768      col-sm-份数
超小屏  <=768  col- xs-份数

列偏移

只能向右偏移
offset
语法：col-lg-offset-份数
会自带15px的padding值

嵌套列

在col中再去嵌套row
显示与隐藏
visible-屏幕
hidde-屏幕
lg   md  sm  xs

注意点

1.过渡加在默认状态，就会有去有回，过渡在hover状态添加，就只有去的效果

2.display无法触发过渡

使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。
div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。

原因
display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。

解决方案
使用visibility替代display，或者opacity也可以