h5学习之移动端网页讲解与移动端响应式布局

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

no的征程

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

阅读量454

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/qq_39773416/article/details/100788911

版权

H5 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Device

Model  模型选择
resolution 分辨率设置
pixel ratio 像素比   就是设置，例如照片多少像素放到浏览器上的一个像素
Emulation Mobile 模拟移动端特效
Shrink to fit 缩放适应屏幕
Media   媒体查询

NetWork  
	// 网络信息 
	// 设备版本号 
	// 浏览器的内核
Sensors 传感器

Emulation touch screen  模拟移动端触屏事件

Emulation geolocation coordinates 重置地理信息
Accelerometer  模拟陀螺仪
	// α 围绕着Z轴旋转 
	// β 围绕着X轴 
	// γ 围绕着Y轴

<meta name = "viewport" content = "width =320px/device-width( 安卓系统不持具体数值 ios支持),  可以在这里设置设备宽度高度
user-scalable=yes,     //是否允许手动缩放
initial-scale = 1.0,       //初始比例
minimum-scale = 1.0,   //允许缩放的最小比例
maximum-scale=1.0,    //允许缩放的最大比例
	target-densitydpi = dpi_value (70-400//每英寸显示的像素点个数）
			    device-dpi  设备默认的像素密度
			    high-dpi    高像素密度
			    medium-dpi  中等的像素密度
			    low-dpi     低像素密度
动端分辨率：240*320(一般不考虑)、320*480、480*800、640*960、480*854
	1280*720、800*1280、1080*1920
	重点考虑320-480

布局方法：
1、320px 宽度定死然后做居中
2、通关media查询响应式布局，根据不同的分辨率设置不同的样式
3、通过自适应100%、box-flex、rem(相对于根目录的字体大小来设置)

<!doctype html><!--声明当前文档为html文档-->
		<html lang="en"><!--语言为英语-->
			<head><!--头部-->
				<meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码-->
				<meta name="Keywords" content="关键词">
				<meta name="Description" content="描述">
				<meta name="viewport" content="width=device-width,
		user-scalable=yes,initial-scale = 1.0,minimum-scale = 1.0,maximum-
		scale=1.0,target-densitydpi =device-dpi">                                   //这里了设置，在移动端才会有作用
				<title>Document</title>
				<script>
					document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth/3 + "px";                                             //document.documentElement.clientWidth   //获取浏览器的宽度，不包括滚动条  这里求的是html 的fontSize  其实就是设置这个网页的默认  1rem 的值等于多少 就等于document.documentElement.clientWidth/3 
					//alert(document.getElementsByTagName("html")[0].style.fontSize);
				</script>
				<style>/*css样式表的衣柜*/
					*{margin:0px;padding:0px;}
					li{
						width:1rem;float:left;height:500px;
						
						list-style:none;
						font-size:14px;
					}
					li:nth-child(1){
						background:red;
					}
					li:nth-child(2){
						background:blue;
					}
					li:nth-child(3){
						background:yellow;
					}
					li:nth-child(4){
						background:#000;
					}
					li:nth-child(5){
						background:red;
					}
					li:nth-child(6){
						background:red;
					}
				</style>
			</head>
			<body><!--身体-->
				<div id="box">
					<ul>
						<li>rem自适应布局</li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					
				</div>
				<div></div>
			</body>
			<script></script>
		</html>