20、移动的页面适配

来源：互联网发布：linux sqlite3 安装编辑：程序博客网时间：2024/06/06 01:31

移动端页面适配：

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*8541280*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";/*代表1rem*///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>

手机相册：

<!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";</script><style>/*css样式表的衣柜*/body,ul{margin:0px;padding:0px;font-size:0.15rem;font-family:"微软雅黑";}li{list-style:none;}a{text-decoration:none;color:#fff;}article{width:100%;height:100%;position:absolute;left:0px;top:0px;}header{width:100%;height:0.45rem;background:#333;text-align:center;line-height:0.45rem;color:#fff;position:relative;}a.btn{position:absolute;width:0.5rem;height:0.25rem;box-shadow:0 0 5px #000;top:0.15rem;border-radius:5px;line-height:0.25rem;}a.btn:nth-child(1){left:15px;display:none;}a.btn:nth-child(2){right:15px;}section{width:100%;position:absolute;left:0px;top:0.45rem;background:#000;overflow:hidden;bottom:0.55rem;}section li{width:1rem;height:1rem;background-size:100% 100%;float:left;border:1px solid #000;box-sizing:border-box;}footer{width:100%;height:0.55rem;background:#222;position:absolute;left:0px;bottom:0px;}footer a{display:block;width:1.5rem;height:100%;float:left;line-height:0.55rem;text-align:center;}footer a:nth-child(1){background:#111;border-right:1px solid #444;box-sizing:border-box;}</style></head><body><!--身体--><article><header><a href="javascript:;" class="btn">删除</a>相机相册<a href="javascript:;" class="btn">选择</a></header><section><ul></ul></section><footer><a href="javascript:;">相机相册</a><a href="javascript:;">所有相册</a></footer></article><script>var oUl = document.getElementsByTagName("ul")[0];var oBtn = document.getElementsByClassName("btn");var oLi = document.getElementsByTagName("li");var html = "";var mark = true;var remove = [];for (var i = 1;i<=16 ;i++ ){html += "<li style='background-image:url(images/"+i+".jpg)'></li>";//加入文件夹images下的照片，照片命名为1、2、3格式}oUl.innerHTML = html;oBtn[1].addEventListener("touchend",fnClick,false);oBtn[0].addEventListener("touchend",reMove,false);function fnClick(){if (mark){oBtn[1].innerHTML = "取消";remove.length = 0;for (var i=0;i<oLi.length ;i++ ){oLi[i].index = i;oLi[i].addEventListener("touchend",fnSec,false);}}else{oBtn[1].innerHTML = "选择";oBtn[0].style.display = "none";for (i = 0;i < oLi.length;i++  ){oLi[i].style.opacity = "1";oLi[i].removeEventListener("touchend",fnSec,false);}}mark = !mark;}function fnSec(){remove.push(this.index);this.style.opacity = "0.2";oBtn[0].style.display = "block";//alert(remove);}function reMove(){//alert(remove);remove = remove.sort(function(a,b){return a-b;});while (remove.length){oUl.removeChild(oLi[remove.pop()]);}mark = false;this.style.display = "none";fnClick();}</script></body></html>

0 0