html5 移动端-响应式布局

最新推荐文章于 2024-09-23 13:21:36 发布

Jason–json

最新推荐文章于 2024-09-23 13:21:36 发布

阅读量659

点赞数

文章标签： h5 移动端 html html5 css

本文链接：https://blog.csdn.net/weixin_46146313/article/details/104188564

版权

移动端开发的两种主流方案之一：响应式布局兼容

内容没有受到(屏幕宽度)明显影响时，自适应宽高即可
内容受到明显的影响时，改变布局，来保证内容的清晰

响应式布局：用于解决不同浏览器，不同分辨率及不同设备的不同显示效果

优点：

面对不同分辨率的设备灵活性很强
能够快捷的解决多设备显示适应的问题

缺点：

兼容各种设备工作量大，效率低，页面加载时间长
一定的程度上，会改变网站原有的布局结构，可能会出现用户混淆问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>响应式布局</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				/*width:600px;*/
				/*height: 600px;*/
				/*border: 1px solid;*/
				/*开启合模型*/
				display: flex;
				/*两端对齐*/
				justify-content: space-around;
				/*换行*/
				flex-flow: wrap;
			}
			.box1{
				
				width:100px;
				height: 100px;
				background-color: #00BCD4;
				border-radius: 50%;
				text-align: center;
				
				line-height: 100px;
			}
			/*@media 声明关键字
			 *screen 设备类型
			 *and   关键字（连接 指定）
			 * ()	媒体特性(就是屏幕尺寸)
			 * {}   指定的样式
			 * 
			   当screen 的屏幕尺寸符合  指定的尺寸时，执行指定的样式
			 max-width：屏幕小于等于指定的尺寸时触发  (最多)
			 min-width：屏幕大于等于指定的尺寸时触发  (最少)
			 
			 声明要写在元素之后  这个顺序很总要   在前在后有优先级 下面优先级高
			 max min同时使用时min-width500px大于500px   max600px 小于600px
			 
			 */
			/*外联写的时候先引入正常时候的样式*/
			@media screen and (max-width:700px) {
				
				.box1{				
					width:40%;  
					/*相对于父级*/
					height: 100px;				 
					background-color: #00BCD4;
					border-radius: 50%;
					text-align: center;				
					line-height: 100px;
				}
			
			}		
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">1</div>
			<div class="box1">2</div>
			<div class="box1">3</div>
			<div class="box1">4</div>
		</div>
	</body>
</html>