移动WEB响应式设计

最新推荐文章于 2024-09-11 17:14:50 发布

测试猫

最新推荐文章于 2024-09-11 17:14:50 发布

阅读量725

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： Web前端前端开发 html 响应式设计移动

本文链接：https://blog.youkuaiyun.com/u014725878/article/details/52812606

Web前端专栏收录该内容

21 篇文章

订阅专栏

pc上的web页面在手机移动端等设备上显示要加入meta标签中的viewport对页面进行渲染，否则排版出现错乱。

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

width：设置布局viewport的特定值("device-width")设备宽度

initial-scale：设置页面的初始缩放

minumum-scale：最小缩放

maximum-scale：最大缩放

user-scaleable：用户能否缩放

<meta name="viewport" content="initial-scale=1.0">

initial-scale自带width=device-with

【度量viewport】=【布局viewport】

移动Web最佳viewport设置

【布局viewport】=【设备宽度】=【度量viewpoint】

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />【常用】

响应式设计核心=>媒体查询

@media screen and (max-width: value) {/*指宽度小于value这个值就对样式进行修改*/</span>
	  #content{
	     width: 100%;
	   	   }
	  #dog{
	     margin-left: 30px;
	     width: 45%;
	     height: 20%;
	   	}
	  }

响应式设计

媒体类型：

screen(屏幕)

print(打印机)

handheld(手持设备)

all(通用)

常用媒体查询参数

width——视口宽高

height——视口宽高

device-width——设备的宽度

device-height——设备的高度

orientation：检查设备处于横向(landscape)还是竖屏(portrait)

设计点一：百分比布局

改变盒子的百分比，进行缩放显示等等。

设计点二：弹性图片

img{
max-width:100%
}

如同第一点布局使用百分比，图片也使用百分比。其背后的思路：无论何时，都全包在图片的元素宽度范围内，以最大的宽度比完整的显示图片。

设计点三：重新布局，显示与隐藏

1.同比列缩减元素尺寸

2.调整页面结构布局

3.隐藏多余的元素

通常需要切换位置元素使用【绝对定位】，减少重绘提高渲染性能。

小例子

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title>demo</title>
	   <style type="text/css">
	   *{
	   	margin: 0;
	   	padding: 0;
	   }
	   	  #content{
	   	  	width: 1300px;
	   	  	height: 2000px;
	   	  	background-color: mediumaquamarine;
	   	  	margin: 0 auto;
	   	  }
	   	  #dog{
	   	  	width: 400px;
	   	  	height: 430px;
	   	  	border: 2px solid navy;
	   	  	float: left;
	   	  }
	   	  #dog>img{
	   	  	width: 100%;
	   	  	height: 93%;
	   	  }
	   	  #dog>p{
	   	  	width: 100%;
	   	  	font-family:"微软雅黑";
	   	  	text-align: center;
	   	  	font-size: 18px;
	   	  	color: red;
	   	  }
	   	  @media screen and (max-width: 1024px){/*宽度小于1024px*/
	   	  	#content{
	   	  		width: 100%;
	   	  	}
	   	  	#dog{
	   	  		margin-left: 80px;
	   	    }
	   	  }
	   	  @media screen and (max-width: 768px) {/*宽度小于768px*/
	   	  	#content{
	   	  		width: 100%;
	   	  	}
	   	  	#dog{
	   	  		margin-left: 150px;
	   	  		width: 60%;
	   	  		height: 25%;
	   	  	}
	   	  	#dog>p{
	   	  		font-size: 25px;
	   	  	}
	   	  }
	   </style>
	</head>
	<body>
		<div id="content">
			<div id="dog">
				<img src="img/haski1.jpg"/>
				<p>我是哈士奇1</p>
			</div>
			<div id="dog">
				<img src="img/haski2.jpg"/>
				<p>我是哈士奇2</p>
			</div>
		</div>
	</body>
</html>

pc浏览器