rem 佈局可適用高度寬度和字體隨着頁面進行改變,而進行伸縮比例
1.rem 和em 的區別
##1.em 是相對於父元素的字體大小來說的
##2.rem 是相對於html元素 字體大小來說的
rem 優點是可以通過修改html裏面的文字大小來修改頁面裏面的元素大小
2.媒體查詢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*媒體查詢一般是從小到大,或者是從大到小*/
/*這句話的意思是,在我們的屏幕上 並且 最大寬度是800px 設置我們想要的樣式*/
/*max-width 小與等於800*/
@media screen and (max-width: 639px ) {
html {
background-color: pink;
font-size: 16px;
}
}
@media screen and (min-width: 640px) and (max-width: 969px) {
html {
background-color: purple;
font-size: 40px;
}
}
@media screen and (min-width: 970px) {
html {
background-color: red;
font-size: 60px;
}
}
* {
margin: 0;
padding: 0;
}
div {
height: 1rem;
font-size: .5rem;
background-color: white;
line-height: 1rem;
text-align: center;
}
</style>
<body>
<div>rem佈局</div>
</body>
</html>
引入資源
分別寫兩個css文件 , 用media判斷屏幕的大小, 來選用不同的css文件
<link rel="stylesheet" href="style1.css" media="screen and (min-width:640px)">
<link rel="stylesheet" href="style2.css" media="screen and (min-width:840px)">
less安裝
less可以實現css算數運算,
選擇器要以嵌套的方式寫入,
僞類選擇器前要加& (&::hover)
npm install less
#使用條件
必須以@開頭
變量名不能以數字開頭
不能包含特殊字符
大小寫敏感
flexible.js
是個自適應屏幕的框架,他會把屏幕平分成10等分,配合rem使用
注意若要限制自適應屏幕大小
@media screen and (max-width: 750px){
html{
# !important提權
font-size: 75px!important;
}
}