android 手机dpi与drawable 安卓手机dpi怎么看

转载

mob64ca13faa4e6 2024-06-02 07:01:23

文章标签 css 流式布局缩放 文章分类 Android 移动开发

除了百分比流式布局之外，rem布局占据了目前移动端布局的热潮。那么究竟这几种布局差别在哪里，对应的有什么效果，希望本文能给你一些有益的启示。除此之外还有响应式布局，固定宽度布局等。

百分比流式布局

核心原则：文字为流式布局，宽度100%按照屏幕宽度缩放，高度固定px，水平采用百分比，或者固宽+变宽，图片固定大小或者百分比缩放，辅助flex布局。有使用的最大媒体查询临界值（一般为640）。通过下图去理解下：

image.png

缺点：在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点

网易的rem布局

随着分辨率的增大，页面的效果会发生明显变化，主要体现在各个元素的宽高与间距。375_680的比320_680的导航栏明显要高。能够达到这种效果的根本原因就是因为网易页面里除了font-size之外的其它css尺寸都使用了rem作为单位，比如你看导航栏的高度设置代码：

header,footer{
height:.90rem;

}

需要注意的是，字号需要额外的媒体查询，而不是rem定的。

//字号单独用px即可 ，这里建议大家用变量定义小中大正常集中字号常量就可以，不用每次去针对具体样式做字号调整。
@media screen and (max-width:321px){
    .m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}
}
//设置基本的字号,基本元素取材除100即可得到rem的大小，当然也可以用16px换算改变根字号为6.25rem即可。因为还有很大比例的手机设计为320的，所以这里考虑为640的。当屏幕大于640的时候，不再放大，让页面处于水平居中640px显示。
function fontAuto(){
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
}
fontAuto();
window.onresize=function(){
fontAuto();
}

阿里rem布局

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。这个device-width的计算公式为：设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。devicePixelRatio称为设备像素比，每款设备的devicePixelRatio都是已知，并且不变的，目前高清屏，普遍都是2，不过还有更高的，比如2.5, 3 等，魅族note的手机还有6p的devicePixelRatio就是3。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置。js中可以通过devicePixelRatio拿到具体的设备数值。（1）动态设置viewport的scale

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';（3）布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10（4）font-size可能需要额外的媒介查询，并且font-size不使用rem，这一点跟网易是一样的。

备注：你也可以通过阿里的现成的解决方案去实现，然后在预处理器中去处理px单位的字号

<script src="http://g.tbcdn.cn/mtb/lib-flexible/%7B%7Bversion%7D%7D/??flexible_css.js,flexible.js"/>

@function s($px) {
    <a href="http://www.jobbole.com/members/wx1409399284">@return</a> ($px / 75) * 1rem;
}
p{
    font-size:s(40);padding-left: s(52);
}

美团rem布局

综合使用scale以及font-size的方案，更加简单。其中个元素的css尺寸为px/100，字号也使用rem作为单位。（参考地址：i.meituan.com/?adap=auto）

//根据屏幕大小及dpi调整缩放和大小
(function() {
var scale = 1.0;
var ratio = 1;
if (window.devicePixelRatio >= 2) {
scale *= 0.5;
ratio *= 2;
}
var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
document.write(text);
document.documentElement.style.fontSize = 50*ratio + "px";
})();

响应式布局

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样反而可以节约成本，不用再专门为自己的网站做一个web app的版本。

@media (max-width:768px){
    //css
}

备注：响应式布局还可以根据设备宽度选择按需加载不同情况下的样式，可以加在样式link标签中。

<link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/>

固定宽度布局

主体页面固定宽度，两边留白。

.main{
width:980px;
margin:0 atuo;
 }

设置viewport进行缩放

仅仅靠这个实现适配是远远不够的，页面载入的时候会有缩放的情况，所以尽量使用rem等常规布局方式去做布局比较好。如果你想使用这个方案，可以使用以下代码实现，针对部分安卓不适配进行了一定的修正。（这种方式还是px为单位）

function changeViewport(){
    // UI-width ：WebApp布局宽度
    // device-width ：屏幕分辨率宽度
    // target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;
    var uiWidth = 750,
        deviceWidth = (window.orientation == 90 || window.orientation == -90) ? window.screen.height : window.screen.width;
        devicePixelRatio = window.devicePixelRatio || 1;

    var myScale = deviceWidth / uiWidth;
    var targetDensitydpi = uiWidth / deviceWidth * devicePixelRatio * 160;
    //alert(uiWidth+","+deviceWidth+","+devicePixelRatio+","+myScale+","+targetDensitydpi);
    var viewportContent = "initial-scale=" + myScale + ", maximum-scale=" + myScale + ", minimum-scale=" + myScale + ',target-densitydpi=' + targetDensitydpi + ', width=device-width, user-scalable=no';
    //var viewportContent = "initial-scale=" + myScale + ", maximum-scale=" + myScale + ", minimum-scale=" + myScale + ', width=device-width, user-scalable=no';
    document.querySelector('meta[name=viewport]').attributes['content'].value = viewportContent;
}

window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    changeViewport();
}, false);
changeViewport();