近期因工作需求，做了一个Vue APP，过程中遇到了曾今经常听说，但从未真正接触过的移动端适配问题，中间遇到了很多挫折，经过了5天吧，这个小app经过来回重写样式好几遍，终于找到了门道，应该算是正路吧，我身边也没有真正做h5 app的伙伴，靠着自己百度、揣摩，外加朋友的帮助，学会了适配的方案。
解释
vh：屏幕可视高度百分比
vmin：屏幕可视宽度和高度中较小的那个，用这个单位，可以让字体在移动设备无论横屏还是竖屏都保持大小不变
vmax：屏幕可视宽度和高度中较大的那个，用处同上vmin
%：相对于父级元素的百分比尺寸
由于设备的高度会在不同的情况下受到影响，所以我们主要使用vw去控制各个元素的尺寸，因为设备的可视宽度正常情况下是不会有什么东东占用的，我没遇到过，所以设备的宽度就是可视宽度，那么宽度不变，我们使用vw去控制元素尺寸的时候，也就不会受到任何影响了，无论在什么情况下，都能保证元素的位置和尺寸不变了
而我们在适当的情况下需要使用%，因为vw、vh等都是设备的整个屏幕的可视宽高百分比，而有时候我们要的百分比是相对父级元素的，所以不要随便乱用，要想好再用
下面展示下把web app打包成apk全屏应用和在浏览器中浏览的效果
px 转 rem，还有写各种屏幕的不同样式的方案是过去的方案，当前主流使用CSS3的新特性单位，才最佳
@media (min-width: 992px)
允许 浏览器可视范围 最小大小 为 992px，当 浏览器可视范围的大小 ≥ 992px 时， container 的最大宽度 为 970px，
即，无论 浏览器放到多大，只要它不少于 992px ，container 的宽度始终为 970px。
当 浏览器可视范围 小于 992px 时，container 中的设置无效。
这里container 中，应该还有设置一个默认的值。
再举例：
@media(max-width:1000px){container{
max-width:970px;
}
}
同理，这里的 @media{max-width:1000px} 就是 允许 浏览器最大宽度 为 1000px，时它小于 1000px 时，container 中的 值才会生效，反即失效。
也就是说：
@media{} 中的值，是 允许条件 ，当这条件成立时，它中的内容才会生效。
详细翻译即为：
如果浏览器的 宽度 小于或等于 1000px 时（注：理解好最大宽度为啥意思，最小宽度 即为 大于或等于这个值），container 中的最大宽度为 970px，无论浏览器被缩到多少，container 的宽度始终为 970px，但是当 大于 1000px 时，container 中的值就为无效。
@media 中也可以写个固定宽度值，如：
@media(wdith:1000px){container{
width:970px
}
}
浏览器宽度等于 1000px 时，container 宽度即为 970px ，显然，这绝对等于的值，设置起来无意义的。
以上~
自测得出的结果……
下面是不失真但不保证是否完全铺满（留有空隙或者超出屏幕）的css代码：
1、横向铺满，纵向留有空隙或超出屏幕：
body {background:url(路径) no-repeat center; background-size:100% auto;}
2、纵向铺满，横向留有空隙或超出屏幕：
body {background:url(路径) no-repeat center; background-size:auto 100%;}
补充说明：background-size属于css3，只有支持css3的浏览器才有效。
电脑（Computer）是一种利用电子学原理根据一系列指令来对数据进行处理的机器。电脑可以分为两部分：软件系统和硬件系统。第一台电脑是1946年2月15日在美国宾夕法尼亚大学诞生的ENIAC通用电子计算机。
人们把没有安装任何软件的计算机称为裸机。随着科技的发展，现在新出现一些新型计算机有：生物计算机、光子计算机、量子计算机等。
用 JS 获得屏幕分辨率
一
<script language=javascript>
alert ("分辨率为 " + screenwidth + "× " + screenheight );
</script>
二
自适应判断浏览器和分辨率JS
<SCRIPT LANGUAGE="JavaScript">
<!--
if (windownavigatoruserAgentindexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
ScreenWidth(IE1024,IE800,IE1152,IEother)
}
else{
if (windownavigatoruserAgentindexOf("Firefox")>=1)
{
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}
else{
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screenwidth == 1024) && (screenheight == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screenwidth == 800) && (screenheight == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screenwidth == 1152) && (screenheight == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}
function setActiveStyleSheet(title){
documentgetElementsByTagName("link")[0]href="style/"+title;
}
//-->
</SCRIPT>
可以使用css3实现，一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。
<html>
<head>
<title>透明效果</title>
<style>
alpha1,alpha2{
width:100%;
height:auto;
min-height:250px;/ 必需 /
_height:250px;/ 必需 /
overflow:hidden;
background-color:#FF0000;/ 背景色 /
}
alpha1{
filter:alpha(opacity=20); / IE 透明度20% /
}
alpha2{
background-color:#FFFFFF;
-moz-opacity:08; / Moz + FF 透明度20%/
opacity: 08; / 支持CSS3的浏览器（FF 15也支持）透明度20%/
}
ap2{
position:absolute;
}
</style>
</head>
<body>
<div class="alpha1">
<div class="ap2">
<p>透明效果 背景为红色(#FF0000)，透明度20%。</p>
</div>
<!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
</div>
</body>
</html>
以上就是关于H5+CSS3移动端适配技术全部的内容，包括:H5+CSS3移动端适配技术、CSS3新增的选择器、css怎么让一张图片适应任何屏幕大小的电脑平铺等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）