Day16笔记
一、rem字符单位
rem （font size of the root element）相对于根元素字体大小的单位，需要一个参照 html{font-size:100px;}
1rem = 100px（此处设为100px为了方便计算）
作用：实现屏幕适配，rem这个值不是固定的，可以根据根元素字体大小动态改变
注意点：font-size大小不能为10px，浏览器最小字体是12px，默认显示大小为24px。
为什么web app要使用rem？
实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小
使用script标记可以引入js文件 js文件可以根据屏幕的大小动态的把根元素字体大小改变了（等比）
二、vw与vh
vw 视窗宽度：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh 视窗高度：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
三、移动端引入css与js文件
以下引入的文件缺一不可
<head>
<meta charset="utf-8">
<!--视口代码-->
<!--视口作用：
1、可以让网页布局区域跟随屏幕大小动态改变
2、禁止用户缩放页面-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>支付宝首页</title>
<!--引入字体图标css文件，比图片文件格式小，加载速度提高-->
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<!--引入重置样式css文件-->
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<!--引入首页样式css文件-->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!--引入rem适配js文件-->
<script src="js/rem.js"></script>
</head>
四、背景图尺寸属性
/*使用背景尺寸属性，背景图大小 值1表示宽度 值2表示高度*/
background-size: 100% 100%;
五、媒体查询
@media 媒体类型 and (媒体属性) {你的样式}
- 使用@media查询，可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当奴重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机，android手机，平板等设备都用得到多媒体查询。
not操作符：
此操作符用于对一个媒体查询语句进行取反操作，类似于JavaScript中的逻辑非运算符。
not是对整个媒体查询语句的一个取反，而不是对某一个媒体属性取反
设备横竖屏
/*竖屏*/
@media all and (orientation:portrait){}
/*横屏*/
@media all and (orientation:landscape){}
/竖屏/
@media all and (orientation:portrait){}
/横屏/
@media all and (orientation:landscape){}
1620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
