标签：响应 适配 html width Day16 宽度 vw font 设备

0821：Day16

响应式布局：

响应式布局：

响应式布局
	特点：
		面对不同的分辨率设备灵活性强
		能够快捷解决多设备显示适应问题
	缺点：

媒体查询：

媒体查询：根据显示器的特性，为其设置CSS样式

1.媒体查询的语法：
		1.内嵌式：
			直接添加在自己的CSS文件里
			@media all and (min-width:320px) and (max-width:1024px){ 
				body { background-color:blue;} 
			}
		2.外链式：
			以外部样式表设置独立的CSS文件，通过link链接进来
			<link rel="stylesheet" media="screen and (max-width:960px)" href="style.css">

2.设备类型：
	all    所有设备
	screen 显示器，笔记本，移动端等设备

3.条件表达式：一个或多个
	最小宽：min-width:value;
	最大宽：max-width:value;
	竖屏：orientation:portrait
	横屏：orientation:landscape

4.关键字：
	and	和
	not 排除某种设备
	only 限定某种设

移动端适配：

1.移动端meta标签：
	设置可视窗口得宽度等于当前设备的宽度，并且不能手动缩放
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2.rem单位：
	rem：相对单位，始终相对html根元素的font-size的大小显示
	默认时，html的font-size=16px；即1rem=16px
	px to rem 插件快速转换方法：
		CTRL+A
		ALT+Z
3.vw单位：
	视口宽度单位：vw
	视口高度单位：vh
	100vw=100% 屏幕宽度的100%
	以iPhone6为标准宽度375px
	100vw=100%=375px
	1vw=1%=3.75px
	100px = 26.7vw
	html的font-size:26.67vw

标签：响应,适配,html,width,Day16,宽度,vw,font,设备
来源： https://www.cnblogs.com/tender-81/p/16614883.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。