欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 前端教程 > HTML5响应式和自适应问题

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:732

高端HTML5响应式企业通用网

2020-05-06   浏览:513

html5响应式外贸网站英文版

2020-05-08   浏览:503

HTML5自适应律师工作室类网

2020-04-04   浏览:494

HTML5影视传媒文化公司类网

2020-05-12   浏览:489

HTML5响应式和自适应问题

发布时间:2020-01-09  
话不多说直接上主体:
1、加在网页头部,让网站自适应宽度。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
width=device-width width为设置layout viewport 的宽度,为一个正整数,”width-device”表示宽度是设备屏幕的宽度
initial-scale=1.0 initial-scale为设置页面的初始缩放值,可以是一个带小数的数字,1.0就是占网页的100%
minimum-scale=1.0 表示最小的缩放比例
maximum-scale=1.0 表示最大的缩放比例
user-scalable=no 表示用户是否可以调整缩放比例,值为”no”或”yes”
2、width:auto; / width:XX%;(父元素一定要有宽度)宽度使用百分比,不要适应绝对值
3、字体使用相对大小的rem,而不是px;
4、加载CSS

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />

<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" /> 

如果屏幕宽度小于600像素(max-device-width: 600px),就加载css600.css文件。
如果屏幕宽度在600像素到980像素之间,则加载css600-980.css文件
5、图片自适应
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			body{
				background: url(images/bg.png) no-repeat;
				background-size:100% 100%;
				background-attachment: fixed;
			}
			.container{
				width: 100%;
				text-align: center;
				position: absolute;
				top: 96px;
			}
			 .container img{
				transform: scale(0.8);
				height: auto;
				width: auto\9;

			}
			#img1{
				width: 100%;
				position: absolute;
				bottom: 10px;
				margin-bottom: 40%;
				transform: scale(0.9);
				/*background: yellowgreen;*/
			}
			#img2{
				width: 100%;
				position: absolute;
				bottom: 20px;
                margin-bottom: 12%;
				transform: scale(0.9);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img src="images/logo@2x.png" alt="" />
		</div>
		<input type="image" src="images/iOS@2x.png" id="img2"/>
		<input type="image" src="images/Android@2x.png" id="img1"/>
		
	</body>
</html>

本文标签

:备案管家服务帮您把复杂流程变简单,解决您在进行网站备案过程中遇到的效率低下和成功率不高的问题。个人300/2个域名,企业500/5个域名,qq1650004.