精华内容
参与话题
问答
  • Android 屏幕适配方案

    万次阅读 多人点赞 2015-05-04 13:08:47
    1、概述大家在Android开发时,肯定会觉得屏幕适配是个尤其痛苦的事,各种屏幕尺寸适配起来蛋疼无比。如果我们换个角度我们看下这个问题,不知道大家有没有了解过web前端开发,或者说大家对于网页都不陌生吧,其实...

    转载请标明出处:
    http://blog.csdn.net/lmj623565791/article/details/45460089
    本文出自:【张鸿洋的博客】

    1、概述

    大家在Android开发时,肯定会觉得屏幕适配是个尤其痛苦的事,各种屏幕尺寸适配起来蛋疼无比。如果我们换个角度我们看下这个问题,不知道大家有没有了解过web前端开发,或者说大家对于网页都不陌生吧,其实适配的问题在web页面的设计中理论上也存在,为什么这么说呢?电脑的显示器的分辨率、包括手机分辨率,我敢说分辨率的种类远超过Android设备的分辨率,那么有一个很奇怪的现象:

    为什么Web页面设计人员从来没有说过,尼玛适配好麻烦?

    那么,到底是什么原因,让网页的设计可以在千差万别的分辨率的分辨率中依旧能给用户一个优质的体验呢?带着这个疑惑,我问了下媳妇(前端人员),媳妇睁大眼睛问我:什么叫适配?fc,尼玛,看来的确没有这类问题。后来再我仔细的追问后,她告诉我,噢,这个尺寸呀,我都是设置为20%的~~追根到底,其实就是一个原因,网页提供了百分比计算大小。

    同样的,大家拿到UI给的设计图以后,是不是抱怨过尼玛你标识的都是px,我项目里面用dp,这什么玩意,和UI人员解释,UI妹妹也不理解。那么本例同样可以解决Android工程师和UI妹妹间的矛盾~UI给出一个固定尺寸的设计稿,然后你在编写布局的时候不用思考,无脑照抄上面标识的像素值,就能达到完美适配,理想丰不丰满~~。

    然而,Android对于不同的屏幕给出的适配方案是dp,那么dp与百分比的差距到底在哪里?

    2、dp vs 百分比

    • dp

    我们首先看下dp的定义:

    Density-independent pixel (dp)独立像素密度。标准是160dip.即1dp对应1个pixel,计算公式如:px = dp * (dpi / 160),屏幕密度越大,1dp对应 的像素点越多。
    上面的公式中有个dpi,dpi为DPI是Dots Per Inch(每英寸所打印的点数),也就是当设备的dpi为160的时候1px=1dp;

    好了,上述这些概念记不记得住没关系,只要记住一点dp是与像素无关的,在实际使用中1dp大约等于1/160inch。

    那么dp究竟解决了适配上的什么问题?可以看出1dp = 1/160inch;那么它至少能解决一个问题,就是你在布局文件写某个View的宽和高为160dp*160dp,这个View在任何分辨率的屏幕中,显示的尺寸大小是大约是一致的(可能不精确),大概是 1 inch * 1 inch。

    但是,这样并不能够解决所有的适配问题:

    • 呈现效果仍旧会有差异,仅仅是相近而已
    • 当设备的物理尺寸存在差异的时候,dp就显得无能为力了。为4.3寸屏幕准备的UI,运行在5.0寸的屏幕上,很可能在右侧和下侧存在大量的空白。而5.0寸的UI运行到4.3寸的设备上,很可能显示不下。

    以上两点,来自参考链接1

    一句话,总结下,dp能够让同一数值在不同的分辨率展示出大致相同的尺寸大小。但是当设备的尺寸差异较大的时候,就无能为力了。适配的问题还需要我们自己去做,于是我们可能会这么做:

    <?xml version="1.0" encoding="utf-8"?>  
    <resources>  
        <!-- values-hdpi 480X800 -->  
        <dimen name="imagewidth">120dip</dimen>      
    </resources>  
    
    <resources>  
        <!-- values-hdpi-1280x800 -->  
        <dimen name="imagewidth">220dip</dimen>      
    </resources>  
    
    
    <?xml version="1.0" encoding="utf-8"?>  
    <resources>  
        <!-- values-hdpi  480X320 -->  
        <dimen name="imagewidth">80dip</dimen>      
    </resources> 

    上述代码片段来自网络,也就是说,我们为了优质的用户体验,依然需要去针对不同的dpi设置,编写多套数值文件。

    可以看出,dp并没有能解决适配问题。下面看百分比。

    • 百分比
      这个概念不用说了,web中支持控件的宽度可以去参考父控件的宽度去设置百分比,最外层控件的宽度参考屏幕尺寸设置百分比,那么其实中Android设备中,只需要支持控件能够参考屏幕的百分比去计算宽高就足够了。

    比如,我现在以下几个需求:

    • 对于图片展示的Banner,为了起到该有的效果,我希望在任何手机上显示的高度为屏幕高度的1/4
    • 我的首页分上下两栏,我希望每个栏目的屏幕高度为11/24,中间间隔为1/12
    • slidingmenu的宽度为屏幕宽度的80%

    当然了这仅仅是从一个大的层面上来说,其实小范围布局,可能百分比将会更加有用。

    那么现在不支持百分比,实现上述的需求,可能需要1、代码去动态计算(很多人直接pass了,太麻烦);2、利用weight(weight必须依赖Linearlayout,而且并不能适用于任何场景)

    再比如:我的某个浮动按钮的高度和宽度希望是屏幕高度的1/12,我的某个Button的宽度希望是屏幕宽度的1/3。

    上述的所有的需求,利用dp是无法完成的,我们希望控件的尺寸可以按照下列方式编写:

       <Button
            android:text="@string/hello_world"
            android:layout_width="20%w"
            android:layout_height="10%h"/>

    利用屏幕的宽和高的比例去定义View的宽和高。

    好了,到此我们可以看到dp与百分比的区别,而百分比能够更好的解决我们的适配问题。

    • some 适配tips

    我们再来看看一些适配的tips

    1. 多用match_parent
    2. 多用weight
    3. 自定义view解决

    其实上述3点tip,归根结底还是利用百分比,match_parent相当于100%参考父控件;weight即按比例分配;自定义view无非是因为里面多数尺寸是按照百分比计算的;

    通过这些tips,我们更加的看出如果能在Android中引入百分比的机制,将能解决大多数的适配问题,下面我们就来看看如何能够让Android支持百分比的概念。

    3、百分比的引入

    1、引入

    其实我们的解决方案,就是在项目中针对你所需要适配的手机屏幕的分辨率各自简历一个文件夹。

    如下图:

    20150503174449732

    然后我们根据一个基准,为基准的意思就是:

    比如480*320的分辨率为基准

    • 宽度为320,将任何分辨率的宽度分为320份,取值为x1-x320
    • 高度为480,将任何分辨率的高度分为480份,取值为y1-y480

    例如对于800*480的宽度480:

    20150503180400049

    可以看到x1 = 480 / 基准 = 480 / 320 = 1.5 ;

    其他分辨率类似~~
    你可能会问,这么多文件,难道我们要手算,然后自己编写?不要怕,下文会说。

    那么,你可能有个疑问,这么写有什么好处呢?

    假设我现在需要在屏幕中心有个按钮,宽度和高度为我们屏幕宽度的1/2,我可以怎么编写布局文件呢?

    <FrameLayout >
    
        <Button
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/hello_world"
            android:layout_width="@dimen/x160"
            android:layout_height="@dimen/x160"/>
    
    </FrameLayout>
    

    可以看到我们的宽度和高度定义为x160,其实就是宽度的50%;
    那么效果图:

    20150503180542414

    可以看到不论在什么分辨率的机型,我们的按钮的宽和高始终是屏幕宽度的一半。

    • 对于设计图

    假设现在的UI的设计图是按照480*320设计的,且上面的宽和高的标识都是px的值,你可以直接将px转化为x[1-320],y[1-480],这样写出的布局基本就可以全分辨率适配了。

    你可能会问:设计师设计图的分辨率不固定怎么办?下文会说~

    • 对于上文提出的几个dp做不到的

    你可以通过在引入百分比后,自己试试~~

    好了,有个最主要的问题,我们没有说,就是分辨率这么多,尼玛难道我们要自己计算,然后手写?

    2、自动生成工具

    好了,其实这样的文件夹手写也可以,按照你们需要支持的分辨率,然后编写一套,以后一直使用。

    当然了,作为程序员的我们,怎么能做这么low的工作,肯定要程序来实现:

    那么实现需要以下步骤:

    1. 分析需要的支持的分辨率

    对于主流的分辨率我已经集成到了我们的程序中,当然对于特殊的,你可以通过参数指定。关于屏幕分辨率信息,可以通过该网站查询:http://screensiz.es/phone

    1. 编写自动生成文件的程序

    代码如下

    import java.io.File;
    import java.io.FileNotFoundException;
    import java.io.FileOutputStream;
    import java.io.PrintWriter;
    
    /**
     * Created by zhy on 15/5/3.
     */
    public class GenerateValueFiles {
    
        private int baseW;
        private int baseH;
    
        private String dirStr = "./res";
    
        private final static String WTemplate = "<dimen name=\"x{0}\">{1}px</dimen>\n";
        private final static String HTemplate = "<dimen name=\"y{0}\">{1}px</dimen>\n";
    
        /**
         * {0}-HEIGHT
         */
        private final static String VALUE_TEMPLATE = "values-{0}x{1}";
    
        private static final String SUPPORT_DIMESION = "320,480;480,800;480,854;540,960;600,1024;720,1184;720,1196;720,1280;768,1024;800,1280;1080,1812;1080,1920;1440,2560;";
    
        private String supportStr = SUPPORT_DIMESION;
    
        public GenerateValueFiles(int baseX, int baseY, String supportStr) {
            this.baseW = baseX;
            this.baseH = baseY;
    
            if (!this.supportStr.contains(baseX + "," + baseY)) {
                this.supportStr += baseX + "," + baseY + ";";
            }
    
            this.supportStr += validateInput(supportStr);
    
            System.out.println(supportStr);
    
            File dir = new File(dirStr);
            if (!dir.exists()) {
                dir.mkdir();
    
            }
            System.out.println(dir.getAbsoluteFile());
    
        }
    
        /**
         * @param supportStr
         *            w,h_...w,h;
         * @return
         */
        private String validateInput(String supportStr) {
            StringBuffer sb = new StringBuffer();
            String[] vals = supportStr.split("_");
            int w = -1;
            int h = -1;
            String[] wh;
            for (String val : vals) {
                try {
                    if (val == null || val.trim().length() == 0)
                        continue;
    
                    wh = val.split(",");
                    w = Integer.parseInt(wh[0]);
                    h = Integer.parseInt(wh[1]);
                } catch (Exception e) {
                    System.out.println("skip invalidate params : w,h = " + val);
                    continue;
                }
                sb.append(w + "," + h + ";");
            }
    
            return sb.toString();
        }
    
        public void generate() {
            String[] vals = supportStr.split(";");
            for (String val : vals) {
                String[] wh = val.split(",");
                generateXmlFile(Integer.parseInt(wh[0]), Integer.parseInt(wh[1]));
            }
    
        }
    
        private void generateXmlFile(int w, int h) {
    
            StringBuffer sbForWidth = new StringBuffer();
            sbForWidth.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
            sbForWidth.append("<resources>");
            float cellw = w * 1.0f / baseW;
    
            System.out.println("width : " + w + "," + baseW + "," + cellw);
            for (int i = 1; i < baseW; i++) {
                sbForWidth.append(WTemplate.replace("{0}", i + "").replace("{1}",
                        change(cellw * i) + ""));
            }
            sbForWidth.append(WTemplate.replace("{0}", baseW + "").replace("{1}",
                    w + ""));
            sbForWidth.append("</resources>");
    
            StringBuffer sbForHeight = new StringBuffer();
            sbForHeight.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
            sbForHeight.append("<resources>");
            float cellh = h *1.0f/ baseH;
            System.out.println("height : "+ h + "," + baseH + "," + cellh);
            for (int i = 1; i < baseH; i++) {
                sbForHeight.append(HTemplate.replace("{0}", i + "").replace("{1}",
                        change(cellh * i) + ""));
            }
            sbForHeight.append(HTemplate.replace("{0}", baseH + "").replace("{1}",
                    h + ""));
            sbForHeight.append("</resources>");
    
            File fileDir = new File(dirStr + File.separator
                    + VALUE_TEMPLATE.replace("{0}", h + "")//
                            .replace("{1}", w + ""));
            fileDir.mkdir();
    
            File layxFile = new File(fileDir.getAbsolutePath(), "lay_x.xml");
            File layyFile = new File(fileDir.getAbsolutePath(), "lay_y.xml");
            try {
                PrintWriter pw = new PrintWriter(new FileOutputStream(layxFile));
                pw.print(sbForWidth.toString());
                pw.close();
                pw = new PrintWriter(new FileOutputStream(layyFile));
                pw.print(sbForHeight.toString());
                pw.close();
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
        }
    
        public static float change(float a) {
            int temp = (int) (a * 100);
            return temp / 100f;
        }
    
        public static void main(String[] args) {
            int baseW = 320;
            int baseH = 400;
            String addition = "";
            try {
                if (args.length >= 3) {
                    baseW = Integer.parseInt(args[0]);
                    baseH = Integer.parseInt(args[1]);
                    addition = args[2];
                } else if (args.length >= 2) {
                    baseW = Integer.parseInt(args[0]);
                    baseH = Integer.parseInt(args[1]);
                } else if (args.length >= 1) {
                    addition = args[0];
                }
            } catch (NumberFormatException e) {
    
                System.err
                        .println("right input params : java -jar xxx.jar width height w,h_w,h_..._w,h;");
                e.printStackTrace();
                System.exit(-1);
            }
    
            new GenerateValueFiles(baseW, baseH, addition).generate();
        }
    
    }

    同时我提供了jar包,默认情况下,双击即可生成,使用说明:

    20150503173911632

    下载地址见文末,内置了常用的分辨率,默认基准为480*320,当然对于特殊需求,通过命令行指定即可:

    例如:基准 1280 * 800 ,额外支持尺寸:1152 * 735;4500 * 3200;

    20150503173719049

    按照

    java -jar xx.jar width height width,height_width,height

    上述格式即可。

    到此,我们通过编写一个工具,根据某基准尺寸,生成所有需要适配分辨率的values文件,做到了编写布局文件时,可以参考屏幕的分辨率;在UI给出的设计图,可以快速的按照其标识的px单位进行编写布局。基本解决了适配的问题。

    本方案思想已经有公司投入使用,个人认为还是很不错的,如果大家有更好的方案来解决屏幕适配的问题,欢迎留言探讨或者直接贴出好文链接,大家可以将自己的经验进行分享,这样才能壮大我们的队伍~~。

    注:本方案思想来自Android Day Day Up 一群的【blue-深圳】,经其同意编写此文,上述程序也很大程度上借鉴了其分享的源码。在此标识感谢,预祝其创业成功!

    ===>后期更新

    Google已经添加了百分比支持库,详情请看:Android 百分比布局库(percent-support-lib) 解析与扩展

    ok~

    群号:463081660,欢迎入群

    下载地址

    微信公众号:hongyangAndroid
    (欢迎关注,第一时间推送博文信息)
    1422600516_2905.jpg

    参考链接

    Android多屏幕适配学习笔记

    开源,原创,实用Android 屏幕适配方案分享

    展开全文
  • web前端页面适配方法

    万次阅读 2018-10-23 09:06:42
    流式布局:就是百分比布局,非固定像素,内容向两侧填充,...适配要求: 1. 网页宽度必须和浏览器保持一致 2. 默认显示的缩放比例和PC端保持(缩放比例1.0) 3. 不允许用户自行缩放网页 满足这些要求达到了适...

    流式布局:就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局

    视觉窗口:viewport,是移动端特有。这是一个虚拟的区域,承载网页的。

    承载关系:浏览器---->viewport---->网页

    适配要求:

    1. 网页宽度必须和浏览器保持一致

    2. 默认显示的缩放比例和PC端保持(缩放比例1.0)

    3. 不允许用户自行缩放网页

    满足这些要求达到了适配,国际上通用的适配方案,标准的移动端适配方案。

    适配设置:

    如果任何设置都没有,默认走的就是viewport的默认设置

    去设置新的viewport设置,达到适配要求。

    <meta name="viewport"> 设置视口的标签 在head里面并且应该紧接着编码设置

    viewport的功能:

    1. width 可以设置宽度 (device-width 当前设备的宽度)

    2. height 可以设置高度

    3. initial-scale 可以设置默认的缩放比例

    4. user-scalable 可以设置是否允许用户自行缩放

    5. maximum-scale 可以设置最大缩放比例

    6. minimum-scale 可以设置最小缩放比例

    在<meta name="viewport" content="" > content="" 使用以上参数

    1. width=device-width 宽度一致比例是1.0

    2. initial-scale=1.0 宽度一致比例是1.0

    3. user-scalable=no 不允许用户自行缩放 (yes,no 1,0)

    标准适配方案:

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

    meta:vp + tab 快捷方式

     

    展开全文
  • pc端页面适配(个人理解)

    万次阅读 2019-01-10 18:03:33
    目也pc端有适配的需求:目前我们pc项目的设计稿尺寸是宽度1920,高度最小是1080。 适配目标: 1.在不同分辨率的电脑上,网页可以正常显示 2.放大或者缩小屏幕,网页可以正常显示 对于宽度的适配 首先设置html,...

    目也pc端有适配的需求:目前我们pc项目的设计稿尺寸是宽度1920,高度最小是1080。

    适配目标:

    1.在不同分辨率的电脑上,网页可以正常显示

    2.放大或者缩小屏幕,网页可以正常显示

    对于宽度的适配

    首先设置html,body{width:100%;overflow-x:hidden;}

    然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于1200px),对于背景层,我们一般都要求完全铺开,主要有以下几种情况:

    1.背景色为纯色:我们可以直接.box{background:#fff;width:100%;}则可以铺满

    2.背景设置为背景图片:

    我们有情况用.box{background: #fff url(images/01.png) no-repeat center center;width:100%;height:100px;}

    有的情况需要用:.box{background: url(images/01.png) repeat left center;width:100%;height:100px;}

    对于内容层我们保证我们的内容都封装在盒子内,然后margin:0 auto;保持居中显示,盒子里面的内容,我们再另外调整

     对于高度的适配

     一般情况下,页面都比较高,我们通过给每个模块设置具体的高度值来做页面,然后页面会出现导航条,我们可以拉动导航条来浏览,但是有的页面的需求是主体内容直接在不同的浏览器上都能完整显示,不通过导航条来浏览

    如何做?

    1、百分比的应用

    百分比的应用在于主视角的定位和缩放,百分比的取值以原设计稿的尺寸为标准。什么意思呢?举个栗子,一个元素在原设计稿里,量出来距离顶部是 200px,如果写死可能是top:200px 或者margin-top:200px,现在要转成百分比,那么这个值可能就是23.3%。这个值怎么算?如果设计稿是 1080,200/1080=18.51%这样计算出来百分比的值。

    但是,有个地方要注意,流体布局下,百分比的值是根据父层计算的;absolute布局的元素是根据最近的relative父层计算的;fixed布局的元素是根据window的可视区域计算的。

    所以,如果要达到适配的效果,不只是当前元素需要用百分比值,其参考计算的元素也是要动态变化的。

    另 外还有一个就是图片缩放的问题,pc很多主视角都是切图的,但是pc不能直接用background-size(虽然强大的filter兼容可以使低版本 ie支持,但是之前说过用filter都要特别小心,特别是涉及到js交互操作的,很多坑)。在pc我们可以直接通过img标签来插入图片,通过设置 img宽度为100%,高度auto,然后让它根据父层来等比缩放来实现(img标签实现缩放引起的另一个问题是该图片不能用雪碧图了,但pc的主视角不 是很多,影响不大)。

    2、js监测

    需要js主要有两个原因:

    上面说了,百分比是要有父层做参照物的,那么如果父层都用百分比,那就是最终是根据window来参照的,因为pc绝大部分都是宽屏设备,而且他们的比例是不一致的,我们来计算下(190是减去浏览器工具条、window桌面条、我们页面通用顶条):

    设计稿:1920/(1080-190) = 2.16

    14寸普通笔记本:1366/(768-190) = 2.36

    所以,我们不能宽高都100%按照屏幕尺寸来计算。另外考虑到主要是高度对pc页面的主视角影响比较大,我们需要借助js来计算确定一个最小高度临界值(当然这个可以用css的min-height来实现);

    另外一个是,通过js判断最小高度临界值,再加上这个最小临界值的class,为了处理那些特殊的布局或者百分比无法完全解决适配的元素,比如字体的相关布局

    展开全文
  • 1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配。 2. 下载: npm install --savepostcss-px2rem npm install --save'postcss-plugin-px2rem 3. 使用:在vue.config.js中 ...

    1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配。

    2. 下载:

    npm install --save postcss-px2rem
    
    npm install --save postcss-plugin-px2rem

    3. 使用:在vue.config.js中

    module.exports = {
        publicPath: process.env.NODE_ENV === 'production' ? '/online/' : '/',
        // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
        // outputDir: 'dist',
        // pages:{ type:Object,Default:undfind }
        runtimeCompiler: true,
        devServer: {
            port: 8888, // 端口号
            host: 'localhost',
            https: false, // https:{type:Boolean}
            open: false, //配置自动启动浏览器
            //proxy: 'http://172.20.10.9:8080', // 配置跨域处理,只有一个代理
            proxy: {
                '/auidt': {
                    target: 'http://172.20.10.9:8080',
                    ws: true,
                    changeOrigin: true
                },
            }, // 配置多个代理
        },
        css: {
            loaderOptions: {
                postcss: {
                    plugins: [
                        // require('postcss-px2rem')({  //配置postcss-px2rem适配
                        //     remUnit:100
                        // })
                        require('postcss-plugin-px2rem')({  //配置postcss-plugin-px2rem适配
                            rootValue: 100, //换算基数, 默认100  ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                            unitPrecision: 5, //允许REM单位增长到的十进制数字。
                            //propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
                            // propBlackList: [], //黑名单
                            exclude: /(node_module)/,  //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
                            // selectorBlackList: [], //要忽略并保留为px的选择器
                            // ignoreIdentifier: false,  //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
                            // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
                            mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
                            // minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                        }),
                    ]
                }
            }
        }
    }

    4. 注意:

           4.1 如果页面这样配置页面全部被缩放很小。需要全局设置一个css:html,body的font-size为100px或者100PX。

    html,body{
        font-size: 100PX;
    }

          4.2 设置好了页面标签都需要设置宽高。或者设置display:flex。

     

     

     

    展开全文
  • 关于Android 10.0适配,看这篇就够了

    万次阅读 多人点赞 2019-07-09 10:48:47
    本文将从三个角度介绍Android Q的部分适配问题,也是大家开发适配过程中大概率会遇到的问题: Q 行为变更:所有应用 (不管targetSdk是多少,对所有跑在Q设备上的应用均有影响) Q 行为变更:以 Android Q 为目标...
  • Android应用图标微技巧,8.0系统中应用图标的适配

    万次阅读 多人点赞 2018-03-13 07:56:38
    大家好,2018年的第一篇文章到的稍微有点迟,也是因为在上一个Glide系列结束之后一直还没想到什么好的新题材。现在已经进入了2018年,Android 8.0系统也逐渐开始普及起来了。三星今年推出的最新旗舰机Galaxy S9已经...
  • 热文导读|点击标题阅读互联网寒冬下,程序员如何突围提升自己?腾讯新开源一吊炸天神器—零反射全动态Android插件框架正式开源Flutter:究竟是大势所趋还是昙花...
  • 前端解决移动端适配的五种方法

    千次阅读 2019-07-11 13:46:10
    移动端适配的五种方法 所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示 第一种方法:viewport适配 原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度. //获取meta节点 var ...
  • iPhone屏幕尺寸、分辨率及适配

    万次阅读 多人点赞 2014-12-26 18:57:59
    从初代iPhone3GS到现如今的...如何适配不同的屏幕尺寸,使UI更加协调美观,这给iPhone/iOS应用开发者带来了挑战。 本文结合个人在iOS UI开发和适配方面的粗浅经验,对常用屏幕适配相关因素做个梳理盘点,以备日后查阅。
  • 适配不同分辨率屏幕

    万次阅读 2016-05-26 12:59:00
    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计...
  • H5页面适配 iPhoneX,就是这么简单

    万次阅读 2018-04-19 20:28:38
    iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见...
  • Android AutoLayout全新的适配方式 堪称适配终结者

    万次阅读 多人点赞 2015-11-23 09:27:03
    转载请标明出处: ... 本文出自:【张鸿洋的博客】 一、概述相信Android的开发者对于设配问题都比较苦恼,Google官方虽然给出了一系列的建议,但是...个人也比较关注适配的问题,之前也发了几篇关于适配的文章,大致有:
  • 前端iPhone刘海屏适配

    万次阅读 2020-05-22 15:12:32
    对于iPhone系列出的越来越多,如果只是使用@media来做适配的话,老代码想要适配新机型还是有一定局限性的。 今天去搜了搜相关的解决方法,那么就来总结一下。 安全区 早期苹果对于 iPhone X 的设计布局意见如下: ...
  • flutter 屏幕适配 字体大小适配

    万次阅读 热门讨论 2018-09-21 00:08:21
    比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配。 安卓原生的话有自己的适配规则,可以根据不同的尺寸建立...
  • Anaconda和ipython环境适配

    万次阅读 2019-01-24 11:35:41
    ipython:同为python命令行工具,相比于原始的python命令行客户端,ipython无疑具有更好地交互体验,无须额外配置,即可享有代码着色、自动补全等诸多便利。 Anaconda:python的环境管理软件。首先可以很方便的切换...
  • vue实现PC端分辨率适配

    万次阅读 多人点赞 2019-07-25 16:12:23
    依赖 项目基础配置使用 vue-cli 生成 自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名 ...
  • Android 10适配要点,作用域存储

    万次阅读 多人点赞 2020-04-14 08:42:48
    距离Android 10系统正式发布已经过去大半年左右的时间了,你的应用程序已经对它进行适配了吗?在Android 10众多的行为变更当中,有一点是非常值得引起我们重视的,那就是作用域存储。这个新功能直接颠覆了长久以来...
  • Android通知栏微技巧,8.0系统中通知栏的适配

    万次阅读 多人点赞 2018-04-17 07:39:11
    大家好,今天我们继续来学习Android 8.0系统的适配。 之前我们已经讲到了,Android 8.0系统最主要需要进行适配的地方有两处:应用图标和通知栏。在上一篇文章当中,我们学习了Android 8.0系统应用图标的适配,那么...
  • android机型适配终极篇

    万次阅读 多人点赞 2016-01-22 22:26:16
    一,基本概念1、分辨率,屏幕大小,密度 (1)分辨率。分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800、720×1280、1080×1920、1440x2560的2K屏等。...
  • 博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载。本文由博主威威喵原创,请多支持与指教。 ... 由于 Android 手机五花八门,手机厂商较多,所以导致的一个问题就是屏幕分辨率各有千秋,诸如:320*480...

空空如也

1 2 3 4 5 ... 20
收藏数 256,403
精华内容 102,561
关键字:

适配