<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 在我们的屏幕上最大的宽度800px 可以设置我们想要的样式*/
/* 媒体查询可以根据不同的屏幕尺寸来改变不同的样式 */
@media screen and (max-width:900px) {
body {
background-color: aqua;
}
}
@media screen and (max-width:700px) {
body {
background-color:burlywood
}
}
/* 屏幕大小大于300px小于500px 背景颜色就是brown */
@media screen and (max-width:500px) and (min-width:300px) {
body {
background-color:brown;
}
}
@media screen and (min-width:950px) {
body {
background-color:green
}
}
</style>
</head>
<body>
</body>
</html>
资源引入 根据不同屏幕大小引入不同的样式
<!-- 屏幕小于320px就引入 styl320.css样式表 -->
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px )">
<!-- 屏幕小于320px就引入 styl640.css样式表 -->
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px )">
<!-- 媒体查询最好的顺序是从小到大的顺序 -->
/* 1. em相对于父元素的字体大小来说的 1em等于10px
2.rem相对于html根元素的字体大小来说的 1rem等于10px */
/* 3.rem的优点就是可以通过修改html里面的文字的大小来改变页面中元素的大小的整体控制 */
rem的适配方案
1. 首先我们选一套标准尺寸 750为准
2. 我们用屏幕尺寸除以我们划分的份数 得到了html的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的
3.页面元素的rem值 =页面元素在750像素下的px值/html里面的文字大小
例如 750/15=50 然后加入在750像素的图片是100px 则rem就是 100/50=2rem
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
