H5常用代码：适配方案5

此方案跟方案4是同一原理，也是通过REM实现的，能单独归类出一个方案，是因为它有一定的实用价值，当你遇到追求完美，追求到一像素的UI或者产品时，那此方案将解决你的困境。

方案5主要是用来解决一像素边框来设计的，当你的设计稿中到处是一像素边框，而UI跟产品拿着手机频频跟你说为什么在手机上边框这么粗的时候，而又无法劝服他们妥协的时候，就用这种适配方案吧，亲。

适配方案5代码如下：

<!DOCTYPE html>
<html>
<head>
<title>主结构&适配方案5</title>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<!--适配主逻辑 S-->
<script type="text/javascript">//实现真实一像素显示function getOnePx(){var dpi=window.devicePixelRatio,//获取屏幕像素比scalez=1/dpi;
        document.write('<meta content="width=device-width,initial-scale='+scalez+',maximum-scale='+scalez+',user-scalable=no" name="viewport">')//通过meta来实现缩放像素比的倍数}//适配函数，动态修改html节点字号function reset(){var htmlo=document.getElementsByTagName('html')[0],clientW=document.documentElement.clientWidth || document.body.clientWidth,fontSz=clientW/16+'px';
        htmlo.style.fontSize=fontSz;}//调用一像素显示
    getOnePx();//初始进来执行一次适配
    reset();//当屏幕旋转的时候，再次执行一次适配
    window.addEventListener('resize',function(){setTimeout(function(){reset();},100);},false)
</script>
<!--适配主逻辑 E-->
<style>body{margin:0;background:#000;}h3,p,ul{margin:0;padding:0;}.wrap{width:100%;-webkit-box-sizing: border-box;box-sizing: border-box;padding:0 0.5rem;background:#ccc;overflow:hidden;line-height:0.9rem;font-size:0.55rem;}.aside_left,.aside_right{width:7.5rem;height:4rem;float:left;color:white;line-height:4rem;font-size:0.65rem;text-align:center;}.aside_con{width:15rem;height:4rem;oveflow:hidden;background:blue;color:white;line-height:4rem;font-size:0.75rem;text-align:center;}.aside_left{background:red;}.aside_right{background:green;}h3{font-size:0.7rem;line-height:1.2rem;}ul{padding-left:1rem;border:1px solid #000;}
</style>
</head>
<body><div id="wrap" class="wrap"><!--示范结构 S--><div class="aside_con"><div class="aside_left">示范块内容0</div><div class="aside_right">示范块内容1</div></div><div class="aside_con">整条示范内容2</div><!--示范结构 E-->   </div>
</body>
</html>

适配说明：

1：主要是通过动态根据屏幕的宽度设置html无素的字体，再根据1rem等于HTML的字号大小来换算布局，例如你的设计稿是640，那除以16则HTML的根字号就是40px,那假设设计上的尺寸是320PX的元素，在写样式的时候就写在320/40即8rem。

2：注意事项:此种方案也是开发HTML5项目很理想的适配方案，特别是公司的wap端项目或者wepAPP,适配5优于适配4的地方就是通过缩放“1/像素比”来实现1PX像素的展现。

适配4之所以不能实现一像素，是因为在手上机，为了让屏幕足够清晰，一般会用多个像素才显示一像素的东东，如苹果4，5都是像素比为2的，那一像素在它上面就会显示成2像素显得格外粗，既然跟像素比有关，那是不是通过先缩放像素分之1就能保证1PX还是以1PX来显示了。

二种方案可看情况选择使用，如果要求展现1PX像素的地方很多，而且又很在意这1像素选择这方案吧。

以上代码归属于我的github常用H5代码整理项目（详见其中adaptationMode/mode5/index.html）：https://github.com/xw5/mobile-code/

欢迎clone,欢迎star,一起学习，一起进步！

转载于:https://www.cnblogs.com/xwwin/p/5786043.html

H5常用代码：适配方案5相关推荐

H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
H5的rem适配方案
在公共的js中加上一下代码,动态计算根节点的font-size,以便rem计算倍数. (function(doc, win) {var docEl = doc.documentElement,resi ...
Web前端深色模式适配方案
众所周知,GitHub 网站在前不久支持了深色模式.我在看 GitHub 的时候发现浏览器默认的滚动条也变成了深色样式: 我当时猜测应该有一个属性可以声明配色方案,然后浏览器根据声明的配色方案采用相应 ...
移动端黑马面面案例（技术方案，代码规范，目录规范，蓝湖/摹客协作平台，适配方案简介，初始化文件，swiper插件使用，index.html，index.less，index.css）
由于水平太菜了,跟着做案例都没做好,一堆的bug,但是不发布觉得有点可惜,就这样吧移动端黑马面面案例技术方案代码规范目录规范蓝湖/摹客协作平台适配方案简介初始化文件 swiper插件使用 ...
移动端常用的几种适配方案
目录一.媒体查询 1.1 媒体查询的优劣势 1.2 媒体查询的应用场景二.媒体查询+rem 2.1 如何进行等比缩放? 2.2 如何在前端开发中应用等比缩放这个计算公式? 2.3 应用实例三.J ...
h5响应式布局、PC和移动端适配方案
前言春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
ios 代码设置控件宽高比_IOS开发入门之iOS一套代码适配所有iPhone手机布局实现方案...
本文将带你了解IOS开发入门iOS一套代码适配所有iPhone手机布局实现方案,希望本文对大家学IOS有所帮助. iOS一套代码适配所有iPhone手机布局实现方案本文主要是讲述一套代码适配所有iP ...
iOS一套代码适配所有iPhone手机布局实现方案
iOS一套代码适配所有iPhone手机布局实现方案本帖主要是讲述一套代码适配所有iPhone手机布局解决方案.要点是了解原理和思想. 多个项目采用了这种布局方式,感觉良好,实际情况还是要看看你们UI ...
pc-H5 适配方案
一.介绍在前端项目页面开发中,尤其是H5页面开发,我们常常要适配各种分辨率的屏幕,才能让用户获得最好的体验效果.pc也是如此,很多页面是一屏,也是要适配各种尺寸的分辨率.这时候我们就需要对各种分辨率 ...
5 款阿里常用代码检测工具，免费用！
作者 | 喻阳面临问题在日常研发过程中,我们通常面临的代码资产问题主要分为两大类:代码质量问题和代码安全漏洞. 1.代码质量问题代码质量其实是一个老生常谈的话题,但问题是大家都知道它很重要,却又 ...

H5常用代码：适配方案5

H5常用代码：适配方案5相关推荐

最新文章

热门文章