PC端视口特点、移动端视口

最新推荐文章于 2023-03-29 15:59:24 发布

yjx_43750162

最新推荐文章于 2023-03-29 15:59:24 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/99690447

版权

pc端视口的特点：
1,如果确定具体的宽高值, 当超出viewport的大小的时候会出现滚动条
2,如果设置的宽度为100%,档子元素宽高大于父容器的时候,会自动换行
3,如果不想出现滚动条或者换行,可以将子元素设置为父容器的百分之比

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				padding: 0;
				margin: 0;
				background-color: #F7F7F7;
			}
			.info{
				line-height: 20px;
				padding: 10px;
				background: pink;
			}
			.info span{
				display: block;
			}
			.viewport{
				width: 100%;
				height: 200px;
				background: #CCCCCC;
			}
			.viewport .box{
				width: 20%;
				height: 200px;
				text-align: center;
				line-height: 200px;
				font-size: 28px;
				float: left;
				background-color: blue;
				border-right: 2px solid #ccc;
				box-sizing: border-box；			
			}
		</style>
	</head>
	<body>
		<!--显示窗口信息-->
		<div class="info">
			<span class="width"></span>
			<span class="height"></span>
		</div>
		<div class="viewport">
			<div class="box">1</div>
			<div class="box">2</div>
			<div class="box">3</div>
			<div class="box">4</div>
		</div>		
		<script src="jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="zepto.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">		
			var clientWidth,clientHeight;
			var width=$('.width'),
				height=$('.height');	
			// 创建一个函数 用来获取viewport
			function getSize(){
				clientWidth=document.documentElement.clientWidth;
				clientHeight=document.documentElement.clientHeight;
				width.text('PC设备viewport的宽度以及高度:'+clientWidth+'==='+clientHeight);
			}
			// getSize();
			// 监听窗口变化
			window.onresize=function(){
				getSize();
			}	
		</script>
	</body>
</html>

移动端设置视口

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--name="viewport": 说明当前meta标签用来设置viewport的属性的，这个属性只有在移动端才会生效-->
<!--content属性:  进行viewport的设置-->
<!--width: 设置viewport的宽度  device-width: 获取当前设备的宽度-->
<!--initial-scale=1  设置初始缩放比例，当我们设置width=device-width, 也达到了initial-scale=1的效果
得知其实 initial-scale=1=ideal viewport/layout viewport意味着,如果initial-scale设置为1,相当于设置了两个viewport的宽度一致-->
<!--minimum-scale=1:  设置默认状态下的最小缩放比列
<!--maximum-scale=1: 设置最大的缩放比列-->
<!--user-scalable=no:  设置是否允许用户进行缩放yes/no-->

yjx_43750162

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PC端视口特点、移动端视口

pc端视口的特点：1,如果确定具体的宽高值, 当超出viewport的大小的时候会出现滚动条2,如果设置的宽度为100%,档子元素宽高大于父容器的时候,会自动换行3,如果不想出现滚动条或者换行,可以将子元素设置为父容器的百分之比<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
复制链接

扫一扫