龙武工会网站怎么做,wordpress主题之家,wordpress安全插件,wordpress wp-content权限源宝导读#xff1a;由于我们ERP目前大都是在在PC上面运行#xff0c;大家现在关注移动端比较少#xff0c;谈到移动端适配时#xff0c;可能都有些生疏也可能比较好奇。以前做过一些移动端的little项目#xff0c;那么借助这次分享的机会#xff0c;和大家一起讨论学习下… 源宝导读由于我们ERP目前大都是在在PC上面运行大家现在关注移动端比较少谈到移动端适配时可能都有些生疏也可能比较好奇。以前做过一些移动端的little项目那么借助这次分享的机会和大家一起讨论学习下。一、背景 现在市场上移动设备的屏幕尺寸、分辨率、屏幕密度等因素各式各样尽可能做到所有设备都自适应只用一套样式布局来适配所有设备。二、适配最终效果在不同分辨率的手机上页面整体布局自适应不会出现页面的情况在不同分辨率的手机上字体、宽高、间距、图片大小能够和高保真近视一致。三、移动端相关的知识点3.1 关于设备屏幕的像素物理设备的显示屏最小组成单位又称物理像素是由物理设备决定的出厂时就确定了屏幕的尺寸屏幕对角线的长度单位是英寸1英寸inch2.54厘米cm屏幕的分辨率例如1366px768px的分辨率意思就是屏幕上横向设置了768个像素竖向设置了1366个像素。假设你调节分辨率为800600那么多余的像素块会被系统分配相邻的近视色块占据看起来就放大了也模糊了屏幕的密度PPI为屏幕每英寸的像素数量可以理解为一个屏幕对角线长度为1英寸的正方形内所拥有的像素数用于度量计算机显示屏上像素的密度。公式3.2 关于编码css像素是一个相对单位用来度量web页面上面的内容与设备像素无关在标准屏幕密度下1px对应1个设备像素但是在现在主流手机上1px并不等于设备的1pxdpr设备像素比定义物理像素和设备虚拟像素可以理解为css像素的对应关系。可以通过js获取dpr window.devicePixelRatio 设备像素 / CSS像素。上图说明了1px在不同dpr时等于几个物理像素。1px对应物理像素除了和屏幕像素密度dpr有关还和用户缩放有关系。当用户把页面放大一倍那么CSS中1px所代表的物理像素也会增加一倍反之把页面缩小一倍CSS中1px所代表的物理像素也会减少一倍。所以一般会在头部meta中禁止用户缩放:user-scalable’no’。viewport针对移动端的视口概念大致了解下widthdevice-width设置布局视口的大小等于设备独立像素initial-scale1.0设置布局视口和视觉视口的大小等于设备独立像素minimum-scale1.0、maximum-scale1.0、user-scalableno不允许用户进行缩放布局视口layout viewport不同设备的布局视口宽度不同一般都大于可视区域样式布局可用大小document.documentElement.clientWidth来获取视觉视口visual viewport用户看到的网站展示区域一般视觉视口和设备宽度一致。并且它的CSS像素的数量会随着用户缩放而改变单位是pxCSS像素该值是可变的缩放情况下可以通过window.innerWidth获取。完美视口ideal viewport:理想宽度就是屏幕的宽度。meta nameviewport contentwidthdevice-width,initial-scale1.0,user-scalableno,minimum-scale1.0,maximum-scale1.0/
四、寻找适配方案的心路历程4.1 在手淘方案没有出来之前移动端适配其实是一大难题起初尝试的方案思路先根据高保真11实现再根据媒体查询对应不同屏幕宽度、不同屏幕密度来实现细节调整如字体、图片等。举个图片的栗子.header-bg {background-image: url(a.png);background-size: 200px 300px;height: 300px;width: 200px;
}
media only screen and (min-width: 320px) {// 小屏幕
}
media screen and (min-width: 320px) and (max-width: 1300px) {// 各种
}
media only screen and (min-width: 1300px) {// 大屏幕
}
media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px) {// 不同dpr 倍图、原始宽高
}
优点图片资源会在对应宽度才会下载语法兼容性好可以根据不同屏幕精准控制。缺点显而易见代码非常冗余维护不便不同尺寸设备细节实现效果不好扩展性很差不可能针对所有类型的终端屏幕做到面面聚到。4.2 为了解css代码维护难问题采用flex弹性布局来解决此问题大致思路如下设置完美视口设置布局视口等于可视结构性布局都是用flex弹性布局细节性margin和padding采用高保真px来布局怪异屏幕分辨率使用媒体查询来做细节调整不同屏幕密度、图片、字体仍然采用媒体查询来控制。// 远古写法兼容 Chrome 4, Safari 3.1, iOS Safari 3.2
.flex-box-h {display:-webkit-box;display:box;-webkit-box-orient:horizontal;box-orient:horizontal;
}
.flex-box-v {display:-webkit-box;display:box;-webkit-box-orient:vertical;box-orient:vertical;
}
// 居中
.flex-box-align {-webkit-box-pack: center;box-pack: center;-webkit-box-align: center;box-align: center;
}
.flex-1 {-webkit-box-flex:1;box-flex:1;
}
.flex-1 {-webkit-box-flex:2;box-flex:2;
}
// ......
优点解决了部分响应式布局代码冗长的问题易于维护。缺点不能兼顾到细节布局细节布局还是需要采用媒体查询来适配felx语法版本太多需要针对不同系统设备来兼容felx部分特性兼容性不好例如自动换行。4.3 虽然解决了部分css代码冗长问题但是还是有不少地方需要借用的媒体查询来做适配并且还是有一些奇葩机型上显示细节达不到预想效果。无意间发现关于viewport知识点的文章上面介绍一个思路能够非常简单实现适配大致思路如下布局还是根据高保真1:1实现例如750px通过js代码计算出750px对应的dpi和缩放然后动态设置target-densitydpidpi告诉浏览器这样来渲染网页图片和字号用媒体查询适配。// 伪代码dpi可以理解为ppi屏幕密度
function targetDensityDpi(){var designerWidth 750var deviceWidth window.screen.width;// Device_Dpi为系统的DPI//如果获取系统DPI失败采用固定值有一个屏幕宽度对应DPI的标准表如:Width320Dpi 120var densityDpi designerWidth*(Device_Dpi)/deviceWidth;densitydpi Math.floor(densitydpi);var scale designerWidth/deviceWidth;document.querySelector(meta[nameviewport]).setAttribute(content,widthdevice-width,target-densitydpidensitydpi,initial-scalescale, minimum-scalescale, maximum-scalescale, user-scalableno);
}
优点减少了不同屏幕密度屏幕媒体查询的适配代码不需要考虑某些机型的奇葩宽度对比上一个方案自适应效果好。缺点未来兼容性不好target-densitydpi在安卓4.0之后就废弃了图片和字体仍然需要媒体查询来适配布局细节仍然需要单独处理。4.4 动态设置html的font-size rem viewport大概思路根据clientWidth和dpr动态设置font-size然后将其他地方根据高保真px转换成rem字体通过媒体查询适配 小屏幕下面显示跟大屏幕同等量的字体。并且如果使用rem的话那么由于等比例的存在在小屏幕下就会存在小屏幕字体更小的情况不利于我们更好的去阅读所以对于字体的适配更好的做法就是使用px和媒体查询来进行适配。function setHtmlFontSize() {var dpr window.devicePixelRatio;var pxPercent doc.documentElement.clientWidth * dpr / 10; // 将页面等分10份doc.documentElement.style.cssText font-size: pxPercent px;;
}
var resizeEvt orientationchange in window?orientationchange:resize;
window.addEventListener(resizeEvt, setHtmlFontSize,false);
window.addEventListener(DOMContentLoaded,setHtmlFontSize,false);rem与px对应关系1rem代表在JS中设置的html font-size值为一块的宽度px对应占多少块。优点兼容性比较好css适配代码少易于维护。缺点对于不同dpr处理细节较麻烦1px细节问rem小数点问题最终css值都是四舍五入的可能不精准。4.5 手淘方案rem flexible库大致思路选择一种尺寸作为设计和开发的基准定义一套适配规则自动适配剩下的尺寸特殊适配效果单独处理。原理flexible库其实做了以下3件事动态改写标签动态设置scale缩放比例给元素添加data-dpr属性并动态改写data-dpr的值给元素添加font-size属性并且动态改写font-size的值。使用方式和注意事项引用flexible_css.js,flexible.jspx转化成rem由于flexible库将设计图等分成10份750px设计稿相当于1rem7.5px可以借助less或者scss去转换获取采用px2rem库统一转换还可以利用插件方式很多不一一列举字号不用rem用px通过[data-dpr”2”]和[data-dpr”3”]分开设置px单位的字体。同样可以采用less或者sass处理利用[data-dpr”2”] .test处理不同dpr的场景。function pxToRem($num) {return ($num/$base) * 1rem;
}
div{width:pxToRem(50);height:pxToRem(50);
}
优点css适配代码量明显减少开发效率高有成套的解决方案1px、2px细节通过缩放方式能够有效解决 。缺点奇葩Android中dpr为小数情况导致1px兼容场景兼容不好针对不同分辨率、1px、高DPR、倍图等场景都是通过Hack手段处理而不是原生css处理相比纯css处理性能会差点。flexible2.0针对1px场景增加兼容。// 进行了精简
// detect 0.5px supports
var docEl document.documentElement;
if (dpr 2) {var fakeBody document.createElement(body);var testElement document.createElement(div);testElement.style.border .5px solid transparent;fakeBody.appendChild(testElement);docEl.appendChild(fakeBody);if (testElement.offsetHeight 1) {docEl.classList.add(hairlines)}docEl.removeChild(fakeBody);
}
4.6 vw rem为了解决纯VW布局不能设置最大最小宽度的问题我们引入REM。大致思路给根元素大小设置随着视口变化而变化的 vw 单位这样就可以实现动态改变其大小;限制根元素字体大小的最大最小值配合 body 加上最大宽度和最小宽度.// rem 单位换算定为 75px方便运算
$vw_fontsize: 75;
function rem($px) {return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同时通过Media Queries 限制根元素最大最小值media screen and (max-width: 320px) {font-size: 64px;}media screen and (min-width: 540px) {font-size: 108px;}
}
// body 也增加最大最小宽度限制避免默认100%宽度的 block 元素跟随 body 而过大过小
body {max-width: 540px;min-width: 320px;
}
优点省去js计算font-size、和缩放比例的问题原生css处理性能更好。缺点兼容性不好ios8、android4.4以上才完全支持margin采用px单位很容易造成整体宽度超过100vw。五、思考PC端的ERP是否也能做到完全自适应呢移动端盛行ERP或者周边生态是否会衍生移动端项目呢待续…------ END ------作者简介罗同学 研发工程师目前负责ERP建模平台的设计与开发工作。也许您还想看从案例角度解析建模平台动态规则引擎WEB页面前端性能诊断方法与实践前端异步对象的原理与使用方法链路追踪在ERP系统中的应用实践
