导入
.css--->.css .less --->.less 导入
@import "文件路径";
嵌套
父子 嵌套 .a>.b
.a {
.b {
}
}
兄弟平行 .a +.b
.a {
}
.b {
}
如果想加伪类 ;
.a{
//&代指上一级选择器
&:hover {
}
}
编译后效果:
.a:hovr {
}
继承
.a {
width:200px;
height:200px;
}
.c {
border-radius:50%;
}
.b {
&:extend(.a,.c...);
}
移动端布局
流式布局 rem布局 视口布局 手淘团队 flexible.js
设备区间划分
大屏 >1200px
中屏 992px-1200px
小屏 768px-992px pad
超小屏 <768px 手机 320px 360px 375px 414px 411px ...
逻辑像素和物理像素
pc: 1物理 = 1逻辑
移动端: 1物理 = ?逻辑(根据系统去定)
逻辑像素指的是css像素 也就是我们写代码的px
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jto0UleX-1607255265617)(media/手机尺寸.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uxpRDvbm-1607255265620)(media/各设备的逻辑像素.png)]
视口设置
移动端布局第一步 视口:呈现网页的介质 ,窗口
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
视口默认宽度:980px 设置:
content:
1. width=device-width 视口宽度=设备宽度
2. initial-scale=1 初始缩放比例1
3. user-scalable=no 禁止用户缩放界面
h5媒体查询
获取设备宽度
@media 查询的设备 and (查询的条件) {
//代码 当查询条件满足时 则执行{}里的代码
}
查询的设备:屏幕screen ,打印机的各项数据print
//当前屏幕宽度大于320px
@media screen and (min-width:320px){
.box {
bgc:green;
}
}
width,min-width,max-width
案例1: 大屏: box盒子 黑色背景 中 红色 小 粉色 超小 红色
.box {
width: 80%;
height: 400px;
margin: 0 auto;
}
/* 小 768px--992px */
@media screen and (min-width: 768px) and (max-width:992px) {
.box {
background-color: deeppink;
}
}
/* 中 992px--1200px */
@media screen and (min-width: 992px) and (max-width: 1200px) {
.box {
background-color: red;
}
}
/* >1200px 大 */
@media screen and (min-width:1200px) {
.box {
background-color: #000;
}
}
/* 超<768px */
@media screen and (max-width:768px) {
.box {
background-color: skyblue;
}
}
流式布局
自适应----》原理: 盒子宽度尽量用%表示 高度可以定高 ,或者auto ,小间距用px即可 ,图片大小也要写% ,文字大小就是px 稍微小一点px (320px - 750px)
缺点: 盒子高度比例与宽度不协调 图片也会被拉伸 所以就是丑一点
rem布局
原理: 在不同的屏幕下,设置当前屏幕的html字体大小值 ,在写具体盒子的时候把量下来的px单位转换为rem单位即可
当前屏幕的html字体大小值 = 当前屏幕宽度*预设字体值(100px)/设计稿的宽度;
100px为了好算
相对单位 : rem
html {
font-size:20px; //1rem = 20px
}
.box {
width:20rem;// 20*20 = 400px
height:20rem;//400px
margin:2rem 0px 1.5rem 0px; // 上 2*20 下1.5*20
font-size:1rem;
}
媒体查询+ rem单位
/* 适配文件 : h5媒体查询+rem */
@media screen and (min-width: 320px) {
/* 1rem = 42.6667 */
html {
font-size: 42.6667px;
}
}
@media screen and (min-width: 360px) {
/* 1rem = 48px */
html {
font-size: 48px;
}
}
@media screen and (min-width: 375px) {
/* 1rem = 50 */
html {
font-size: 50px;
}
}
@media screen and (min-width: 414px) {
/* 1rem = 55.2px*/
html {
font-size: 55.2px;
}
}
@media screen and (min-width: 414px) {
/* 1rem = 55.2px*/
html {
font-size: 55.2px;
}
}
@media screen and (min-width: 540px) {
/* 1rem = 72px*/
html {
font-size: 72px;
}
}
@media screen and (min-width: 640px) {
/* 1rem = 85.3px*/
html {
font-size: 85.3px;
}
}
@media screen and (min-width: 750px) {
/* 1rem = 100px*/
html {
font-size:100px;
}
}
js查询屏幕 + rem单位
1. 获取html元素 html元素.字体大小 ;
2. 获取当前屏幕的宽度
3. 赋值
当前屏幕宽度字体基础值html = 当前屏幕宽度*预设字体基础值/psd设计稿的宽度;
//获取当前屏幕宽度
var currSWidth = document.documentElement.clientWidth;
//预设字体基础值
var preFont = 100; //1rem = 100px
//psd设计稿的宽度 假如设计稿就是750px
var psdWidth = 750;
if(currSWidth > 750) {
currSWidth = 750;
}
//当前屏幕宽度所对应的字体基础值
var currFontSize =currSWidth*preFont/psdWidth;
//设置当前屏幕下html的字体基础值
document.documentElement.style.fontSize = currFontSize +'px';