移动端与响应式

移动端与响应式

*小知识点：随着时代的发展，pc已经无法满足人们的需求，于是出现了移动端

viewport：视窗的设置        <meta name="viewport" 
content="
width=device-width, 宽度等于设备的宽度，浏览器宽度等于系统分辨率
initial-scale=1.0,  初始化比例是1
minimum-scale=1, 最小的缩放比例
maximum-scale=1, 最大的缩放比例
user-scalable=no"> 是否允许用户缩放

**该行声明仅适用于移动端

分辨率：

		1：物理分辨率：750*1334 （苹果） 5寸  ----- 1080*1920 14寸
		2：系统分辨率：375*667
如果设计师给你一张苹果的设计稿，而你必须要适配所有的移动设备，那么你就将系统分辨率定到750px
<meta name="viewport" content="width=750, initial-scale=1.0, minimum-scale=1,maximum-scale=1,user-scalable=no">

响应式
一般情况一个项目分为pc端的页面和移动端的页面

pc移动的响应式：适应pc的页面和移动端的页面

	响应式的页面主要依赖于媒体查询：@media  only screen and (min-width:???) and (max-width:???){}
	min-width:设定页面大于？？px的样式
	max-width:设定页面小于？？px的样式
	PS：如果需要使用媒体查询，必须要引入    <meta name="viewport" content="width=device-width, initial-scale=1.0">视图标签

代码如下：