vue适配链接
方法一vw
rem是相对长度单位。是根元素（html）的font-size值的的一个css单位（适配单位rem）。
如：一个页面html中设置了font-size的值，使用rem即为这个已设置值的倍数。
eg: html设置font-size: 20px; 可知1rem=20px,使用时即可计算转化为rem的倍数。
<style>
html{
font-size: 20px;
}
</style>
<body>
<div style="font-size: 1rem;">国破山河在城春草木深</div>
<div style="font-size: 2rem;">感时花溅泪恨别鸟惊心</div>
</body>
rem：相对单位 root em。 参考值为：HTML根标签的font-size的值。
rem布局的原理：
动态修改html根标签中的font-size值。
实现方式：
1.通过js
2.通过vw。
百分比布局缺点：
1.计算百分数不方便。
2.多层嵌套时使用不方便。
vw/vh 相对屏幕
vw：1vw = 屏幕宽度的百分之一。
vh: 1vh = 屏幕高度的百分之一。
区别：
百分比参照的是父盒子
vw/vh 参照的是屏幕。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 26.67vw;
}
*{
margin: 0;
padding: 0;
}
.box{
margin: 0 auto;
width: 0.4rem;
height:0.6rem;
background-color:blue;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
下载插件,需要改变的px值,alt+z 就能转换为rem
方法二媒体查询实现
进行适配就是根据不同屏幕大小设定不同的font-size值
屏幕宽 字体大小
假设： 750px ====> 根元素的字体大小为： 100px 1rem = 750 * 100 / 750 px
开发： 375px =====》 推算在375px的屏幕上根元素的字体大小：1rem = 375 * 100 / 750 = 50px
开发： 414px =====> html Fontsize = （414 * 100 / 750） px
也就是414/7.5 =55.2px
html.style.fontSize = wd * 100 / 750 + ‘px’;
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0 "> 原本模样 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,
user-scalable=no">
<!-- width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例 -->
这是一个封装好的方法,可以直接用
(function () {
function resizeEvent() {
// 获取根元素html
let html = document.documentElement;
// 获取宽度
let wd = html.clientWidth;
// let wd = html.getBoundingClientRect().width
// 进行判断
if (wd > 750) {
wd = 750
}
// 根据不同的屏幕，设置根元素的字体大小
// html.style.fontSize = wd * 100 / 750 + 'px';
html.style.fontSize = wd / 7.5 + 'px';
}
resizeEvent();
// 性能考虑
let time = null;
// 监听事件
window.addEventListener('resize', function () {
time && clearTimeout(time)
time = setTimeout(resizeEvent, 300)
})
})()//括号是自执行函数的意思
方法三js实现(用的少)
也是动态修改html中font-size的值来实现
把视觉稿分成100份来看待（为了以后兼容vh，vw单位）。每一份被称为一个单位a。同时，1rem单位认定为10a。
拿750的视觉稿举例：
1a = 7.5px
1rem = 75px
因此，对于视觉稿上的元素的尺寸换算，只需要原始px值除以rem基准px值即可。
例如240px * 120px的元素，最后转换为240/75 120/75
是 3.2rem * 1.6rem。
这是需要引入的js文件
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
sass讲解
css一些问题：
1.css需要书写大量冗余的代码。
2.不方便维护。
sass：作为css的一种扩展语言。它没有减少css的功能，而是在css的基础上引入了一些css原本没有的功能（变量，Mixin,运算，函数，嵌套）。
使用sass优点：
能让咱们写更少的代码，来实现更多的功能。
步骤
sass是一个插件,在vscode中下载就能使用(创建sass后缀的不是sass,而是scss)
引入时优先引用压缩后的css(是选择姓引用,原来的文件不能删,只是不去引用)
<link rel="stylesheet" href="./css/01.min.css">
1.变量
格式：以$符号开头，跟变量名即可。
先定义 $bc-color:red;
首先定义一个变量。 变量名：变量值。
如果变量嵌套在字符串中，则必须写在#{}里面。
$m-r:right;
margin-#{$m-r}: 40px;
等同于: margin-right: 40px;
2.嵌套
在css中直接使用标签嵌套。
有些时候需要使用父选择器，这个时候则使用 & 占位符。
属性嵌套：复合属性才可以使用。
这里表示左边框
border: {
style:solid;
left:{
width: 4px;
color: #888;
}
};
3.注释
单行注释：// 不会保留到编译后的css文件中。
多行注释：/* / 会保留到编译后的css文件，压缩文件则没有。
重要注释：/！ */ 会保留到编译后的css文件，压缩文件也会保留，一般用于版权声明。
属性嵌套必须是
复合属性
$bc-color:red;//这是定义的一个变量方法
$m-r:right;
*sass中样式*
.container{
width: 800px;
height: 300px;
background-color: $bc-color;
.button-group{
button{
font-size: 24px;
color: #fff;
padding: 10px 20px;
margin-#{$m-r}: 40px;
}
}
}
*结构*
<body>
<div class="container">
<div class="button-group">
<button>开始</button>
<button>结束</button>
</div>
</div>
</body>
上面的sass的引用在css样式中就是变成了如下这样
background-color: red;
margin-right: 40px;
继承及综合案例详解
sass部分
//----------------------------------------
//定义一个混合。相当于是一个方法
@mixin boxStyle($bc,$fc:red) {
background-color: $bc;//没有定义颜色只是定义了 $bc是一个背景颜色属性
p{
color: $fc;//上面定义了红色
}
}
//----------------------------------------
.box {
width: 200px;
height: 200px;
@include boxStyle(yellow );// 这里是引用上面的方法,并赋值为黄色
p{
text-align: center;
color: green;//虽低不着泥 本应该是红色,这里被绿色覆盖
}
}
$ye:yellow;//这是定义了变量,为黄色
$m-r:top;
.box2{
//@extend 继承-可以让一个选择器继承另一个选择器的所有样式。
@extend .box;
color: $ye;//这里使用了上面的变量
margin-#{$m-r}: 40px;
// 这里是引用上面的方法
@include boxStyle(blue);//背景为蓝色,字体为红色(红色是上面的方法有的)
}
// .box ,.box2{}这样写是并集,sass里面的选择器和css一样
html
<div class="box">雪压枝头低
<p>
虽低不着泥
</p>
</div>
<div class="box2">
一招红日出
<p>依旧与天齐</p>
</div>
计算
sass中样式
div{
padding: 2px * 4;
margin: 20px + 2px;
font-size: 16px - 2;
// 除法必须加小括号
border: (10px / 2) solid;
// 取绝对值
margin: abs(-10px);
// 四舍五入
margin: round(3.6px);
// 向上取整
margin: ceil(3.2px);
// 向下取整
margin: floor(3.999px);
width: percentage(650px/1000px);
}
css中效果
div {
padding: 8px;
margin: 22px;
font-size: 14px;
border: 5px solid;
margin: 10px;
margin: 4px;
margin: 4px;
margin: 3px;
width: 65%;
}
颜色
// 提供了两个颜色函数。
@mixin d-center {
margin: 0 auto;
margin-top: 200px;
}
div{
width: 300px;
height: 300px;
改变颜色的深浅
使变亮
background-color: lighten(#cc3,30%);
使变暗
background-color: darken(#cc3,40%);
@include d-center();
}
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
