方案:
rem(root em)是一个相对单位,类似于em,em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如,根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px.
<body>
<div>
<p></p>
</div>
</body>
<style>
html {
font-size: 14px;
}
div {
/* font-size: 12px; */
width: 10rem;
height: 10rem;
background-color: blueviolet;
}
p {
/* 1.em相对于父元素 的字体大小来说的 */
/* width: 10em;
height: 10em; */
/* 2.rem相对于html元素的字体大小来说的 */
width: 10rem;
height: 10rem;
background-color: aqua;
/* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小 可以整体控制 */
}
</style>
媒体查询(Media Query)是css3新语法。
<style>
/* 这句话的意思是:在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
@media screen and (max-width: 800px) {
body {
/* 当max-width 小于等于800像素时屏幕显示pink色*/
background-color: pink;
}
}
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
@media screen and (max-width: 500px) {
body {
background-color: red;
}
}
</style>
将不同的终端设备划分成不同的类型,称为媒体类型
值 | 解释说明 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕、平板电脑、智能手机 |
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
每种媒体类型都是具有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意他们要加小括号包含
值 | 解释说明 |
---|---|
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域宽度 |
max-width | 定义输出设备中页面最大可见区域宽度 |
案例:
<style>
* {
margin: 0;
padding: 0;
}
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
line-height: 1rem;
font-size: .5rem;
background-color: green;
color: #ffffff;
text-align: center;
}
</style>
<body>
<div class="top">购物车</div>
</body>
当样式比较繁多的时候,我们可以针对不同的媒体使用不同的stylesheets(样式表)
原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
案例
分析:
<head>
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
</head>
<body>
<div>1</div>
<div>2</div>
</body>
/* style640.css */
div {
float: left;
width: 50%;
height: 100px;
}
div:nth-child(1){
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}
/* style320.css */
div {
width: 100%;
height: 100px;
}
div:nth-child(1){
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}
css是一门非程序式语言,没有变量、函数SCOPE(作用域)等概念
Less中文网址:http://lesscss.cn/
常见的CSS预处理器:Sass、Less、Stylus
一句话:Less是一门css预处理语言,它扩展了css的动态新特性。
我们首先新建一个后缀名为less的文件,在这个less文件里面书写less语句。
变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名:值;
本质上,Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,则这些规则最终会通过解析器,编译生成对应的CSS文件。
所以,我们需要把我们的less文件,编译生成css文件,这样我i们的html页面才能使用。
Easy LESS插件用来把less文件编译为css文件
安装完毕插件,重新加载下vscode,会自动生成css文件。
我们经常用到选择器的嵌套
header .logo {
width:300px;
}
Less嵌套写法
header {
.logo {
width:300px;
}
}
如果遇见(交集|伪类|伪元素选择器)
a:hover {
color:red;
}
less嵌套写法
a {
&:hover {
color:red;
}
}
任何数字,颜色或者变量都可以参与运算。就是提供了加(+)、减(-)、乘(*)、除(/)算术运算。
/*Less 里面写*/
@width:10px + 5;
div {
border:@width solid red;
}
/*生成的css*/
div {
border:15px solid red;
}
/*less甚至还可以这样*/
width:(@width + 5) * 2
总结:
rem+媒体查询+less技术
设备 | 常见宽度 |
---|---|
iPhone4.5 | 640px |
iphone678 | 750px |
android | 常见320px、360px、375px、384px、400px、414px、500px、720px 大部分4.7~5寸的Android设备为720px |
一般情况下,我们以一套或两套效果适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果,现在基本以750为准。