快速了解移动端和响应式

移动端

viewport视窗的设置

此声明仅适用于移动端
viewport 视窗的设置
content="

• width=device-width, //宽度等于设备的宽度，浏览器宽度分辨率等于系统分辨率
  

•   initial-scale=1, //初始化比例是1
  

•   minimum-scale=1, //最小的缩小比例1
  

•   maximum-scale=1, //最大的放大比例
  

•   user-scalable=no" //用户不允许缩放
  

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

响应端

 /*媒体查询*/
	 	/*页面小于600像素时的效果*/
	 	@media only screen and (max-width: 600px){
	 	}

注意

• 并不是所有的页面都需要移动端和PC端响应，因为如果页面比较复杂，那么代码就会比较凌乱和繁多。而且不能更加针对性地设置PC和移动端页面。
• 使用媒体查询，必须加上 meta viewport 标签