企业网站建设需要做些什么,查询商标注册的官方网,网页系统制作公司,江西h5响应式网站建设设计DPR dpr问题是移动端web开发上需要注意的问题#xff0c;用大白话说就是#xff0c;代码中所设置的像素值实际上是虚拟像素#xff0c;手机屏幕上的像素实际为物理像素#xff0c;原始的手机#xff0c;虚拟像素与物理像素是1:1覆盖的#xff0c;但随着移动端屏幕的技术发…DPR dpr问题是移动端web开发上需要注意的问题用大白话说就是代码中所设置的像素值实际上是虚拟像素手机屏幕上的像素实际为物理像素原始的手机虚拟像素与物理像素是1:1覆盖的但随着移动端屏幕的技术发展屏幕尺寸不变的情况下密度却增大了就会出现逻辑1像素覆盖了多个物理像素就造成了不清晰的问题。 dprdevicePixelRatio就是即物理像素/逻辑像素 在美工切图的时候需要切1倍、2倍、3倍图也是因为这个问题。而在移动web开发中也需要根据不同屏幕做不同的处理目的是尽可能让逻辑像素与物理像素一一对应这样才能达到最清晰的状态。 在js中可以获取dpr的值
window.devicePixelRatio
在css中解决dpr问题应使用媒体查询
border 1像素问题
css中设置的1px是虚拟像素在移动屏上drp是1的情况下边框是正好1:1覆盖的但在大于1的情况下比如iPhone 6s上的drp是2css的1像素实际上在屏幕上要覆盖两倍的物理像素于是看上去就比较粗如果拿原生APP去比web就明显粗一些就是因为实际在物理屏上覆盖了2像素的高度。 解决这个问题的思路是根据媒体查询在不同dpr下利用transform中的缩放将Y轴缩放一定比例尽量使虚拟像素与物理像素吻合。比如dpr是1.5则Y轴缩放0.7因为没办法设0.752的情况下缩放0.53的情况下缩放0.3。
html div idvTabs classvTabs border-1px/div
stylus
border-1px($color)position relative::afterdisplay blockwidth 100%position absoluteleft 0bottom 0border-top 1px solid $colorcontent media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5).border-1px::aftertransform scaleY(0.7)-webkit-transform scaleY(0.7)media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2).border-1px::aftertransform scaleY(0.5)-webkit-transform scaleY(0.5)media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3).border-1px::aftertransform scaleY(0.3)-webkit-transform scaleY(0.3).vTabswidth 100%height 40pxline-height 40pxbackground #ffffffdisplay flexborder-1px(rgba(7,17,27,0.1))
图片适应
目前移动端屏的dpr基本都是2以上我们一般考虑2和3的情况即可。 思路也是一样的利用媒体查询不同屏幕上使用不同尺寸图片尽量使虚拟像素与物理像素吻合。 stylus mixin
background-img($url)background-image url($url2x.png)media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)background-image url($url3x.png)
意思是如果dpr大于等于33以上则用3倍图否则均用2倍图。当然这里要约定好图片的命名。
css中应用 .icondisplay inline-blockvertical-align topwidth 30pxheight 18pxbackground-img(./img/brand)background-size 100% 100%background-repeat no-repeat 张鑫旭大神的dpr解释 http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
