精华内容
下载资源
问答
  • pc端做适配

    千次阅读 2019-01-08 09:30:57
    最近公司官网,适配,总结一下,防止下次做适配的时候在走弯路 步骤 1.确定要哪些屏幕的适配 目前主流的屏幕有 window系统 1920 1366 其中1920的推荐显示为125% 其宽度为1530 所以1530的兼容也要 mac系统 ...

    最近做公司官网,做了适配,总结一下,防止下次做适配的时候在走弯路

    步骤

    1.确定要做哪些屏幕的适配

    目前主流的屏幕有 window系统 1920 1366 其中1920的推荐显示为125% 其宽度为1530 所以1530的兼容也要做 mac系统 1680 1440 1280 1024

    2.和需求、ui讨论要做多少套兼容,然后根据讨论结果出设计图

    3.根据设计图,搭建框架,做适配

    做适配

    媒体查询 根据不同的屏幕宽度设置不同的样式达到适配效果

    媒体查询分为公共和局部:

    公共的为所有的公共样式,如一级标题、二级标题在不同屏幕上的字体大小、是否加粗,写在公共样式中,直接引用(公共样式在开始做适配前要和ui对好,要不后面会很麻烦)

    局部为一些特殊的样式,不能写在公共中,否则会和别的位置样式冲突

    局部示例:

    // 如果文档宽度小于 300 像素则修改背景颜色(background-color):
    @media screen and (max-width: 300px) {
        body {
            background-color:lightblue;
        }
    }
    复制代码
    // 如果文档宽度大于 300 像素则修改背景颜色(background-color):
    @media screen and (min-width: 300px) {
        body {
            background-color:lightblue;
        }
    }
    复制代码
    // 如果文档宽度大于 1900 像素小于1920像素则:
    @media screen and (min-width: 1900px) and (max-width: 1920px){
          transform:scale(1.3);
    }
    复制代码

    在设置时,需要注意先后顺序,不然后面的会覆盖前面的样式。

    流式布局

    流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。代表作栅栏系统(网格系统)。

    网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。

    1、布局特点:屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

    2、设计方法:使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

    这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。

    一般都是流式布局(即百分比布局)和媒体查询混合使用

    展开全文
  • 主要介绍了手机端用rem+scss做适配的详解,小编觉得挺不错的,现在分享给大家,也给大家个参考。一起跟随小编过来看看吧
  • UI给力1334px × 750px的设计图,但是我根据设计图的尺寸来写css会发现大了一倍,这应该就是retina屏的原因。...如果我想用rem的方案来做适配,请问根标签的font-size应该根据每种屏幕怎么计算来设置
  • 移动端是怎么做适配

    千次阅读 2018-12-27 01:42:21
    1、设置理想窗口meta viewport 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小...

    1、设置理想窗口meta viewport
    移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。

    一般我们在编辑器里输入meta:vp按下tab就可以自动补全这些

    width=device-width这句代码可以把布局视口设置成为浏览器(屏幕)的宽度。

    initial-scale=1的意思是初始缩放的比例是1,使用它的时候,同时也会将布局视口的尺寸设置为缩放后的尺寸。而缩放的尺寸就是基于屏幕的宽度来的,也就起到了和width=device-width同样的效果。
    设置理想视口,使得DOM宽度(layout viewport)与屏幕宽度(visual viewport)一样大,DOM文档主宽度即为屏幕宽度
    要注意的是:1个CSS像素(1px)由多少设备像素显示由具体设备而不同。

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

    2、媒体查询
    使用@media 查询,可以针对不同的媒体类型定义不同的样式。
    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果需要设置设计响应式的页面,@media 是非常有用的。
    当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
    媒体查询的结果可以用css文件代替
    语法:

    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }
    

    也可以针对不同的媒体使用不同 stylesheets (媒体类型是可选的,默认值是all):

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
    
    

    实例:如果设备的分辨率在800px一下,则这些CSS文件生效。

    <!-- link元素中的CSS媒体查询 -->
    <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
    
    <!-- 样式表中的CSS媒体查询 -->
    <style>
    @media (max-width: 800px) {
      .facet_sidebar {
        display: none;
      }
    }
    </style>
    

    3、动态rem方案(手机专用自适应方案)

    rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位,即根据网页的根元素(html)来设置字体的大小。

    实现动态rem,主要需要下面两步:
    1.使用 JS 动态调整 REM

          <script>
            var pageWidth = window.innerWidth
             document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
          </script>
    

    2.使用sass自动将设计稿的px转换为rem
    在scss文件里写这样一个函数:

        @function px( $px ){
        @return $px/$designWidth*10 + rem;
        }
    
        $designWidth : 640; // 640 是设计稿的宽度,你要根据设计稿的宽度填写。设计师的设计稿宽度需要统一
    

    补充知识:

    1.设备像素(device pixel):设备能控制显示的最小物理单位,显示器上一个个的点。大小固定,不可变。其实就是常说相对屏幕的分辨率。比如iPhone6的1334750px。

    2.设备独立像素(dip/dp:device-independent pixel):计算机坐标系统中的一个点,该点代表一个可由程序使用并控制的虚拟像素,当设备像素比等于1的时候。它在数值上与css数值是相等的。比如iPhone6的375667px。

    3.设备像素比(device pixel ratio):通过window.devicePixelRatio获取。设备像素比DPR = 设备像素/ 设备独立像素。iPhone4及以上的像素比不是1,这就影响了用几个设备像素去展示1个CSS像素了。

    4.CSS像素是Web编程的概念,指的是CSS样式代码中使用的逻辑像素。
    在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px是一个相对单位。

    5.initial-scale定义视口的缩放比例,1 css pixel 等于1 viewport pixel 。当改变initial-scale的大小时,即缩放网页,相应的,设备像素也响应的改变。

    6.document.documentElement.clientWidth代表文档的宽度。文档的宽度是由css控制的。

    7.window.screen.width获取的值是设备独立像素。不论是PC端还是移动端,window.screen.width获取的值是设备独立像素。比如iPhone6的375*667px。

    8.window.innerWidth获取的是浏览器视口(viewport)宽度

    展开全文
  • H5端rem适配方法,尤其针对某些手机,使用rem 之后仍然无法正常显示,针对某些手机适配判断,确保少数型号手机满足适配
  • vue移动端适配最佳解决方案,亲测有效

    万次阅读 多人点赞 2018-05-25 17:20:34
    最近在商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,不了移动端的适配,官网的提供的vw适配方案发现不可行,最后还是决定rem来做适配,上网搜了一下,发现了一套可用方案,亲测有效...

    最近在做商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,做不了移动端的适配,官网的提供的vw适配方案发现不可行,最后还是决定rem来做适配,上网搜了一下,发现了一套可用方案,亲测有效哦

    它的原理是借助px2rem 插件方便的将px单位转为了rem

    具体步骤:

    • 安装
    npm install px2rem-loader  lib-flexible --save 

    • 在main.js中引入lib-flexible
    import 'lib-flexible/flexible.js'
    • 在build下的 utils.js中,找到generateLoaders 方法,添加以下代码
    const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
        remUnit: 37.5
        }
    }
    
    function generateLoaders (loader, loaderOptions) {
        const loaders = [cssLoader, px2remLoader]
        if (loader) {
            loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
            sourceMap: options.sourceMap
            })
        })
    }
    • 重启项目,会发现自己设置的px被转为rem 了
    • 但是有一定的局限性
    • 以上实现转换适用于:

      (1)组件中编写的<style></style>下的css

      (2)从index.js或者main.js中import ‘../../static/css/reset.css’引入css

      (3)在组件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css

      另外的情况不适用:

      (1)组件<style></style>中@import “../../static/css/reset.css (可考虑上面(2)、(3)的形式引入)

      (2)外部样式:<link rel=”stylesheet” href=”static/css/reset.css”>

      (3)元素内部样式:style=”height: 417px; width: 550px;”

      另外我要补充的是:在做移动端适配的时候我们不建议给字体也设置rem的单位,针对这种情况,我为字体适配的解决方案是使用媒体查询,文件以组件<style></style>中@import “../../static/css/reset.css形式引入,可完美解决移动端适配问题

    展开全文
  • Android AutoLayout全新的适配方式 堪称适配终结者

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

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

    一、概述

    相信Android的开发者对于设配问题都比较苦恼,Google官方虽然给出了一系列的建议,但是想要单纯使用这些建议将设备很轻松的做好,还是相当困难的。个人也比较关注适配的问题,之前也发了几篇关于适配的文章,大致有:

    ok,我大致说一下,没看过的先看完这篇,再考虑看不看以上几篇,本篇的灵感是来自以上几篇,但是适配的方便程度、以及效果远比上面几篇效果要好。

    既然灵感来源于上述几篇,就大体介绍下:

    • 第一篇:主要是根据设计图的尺寸,然后将设计图上标识的px尺寸,转化为百分比,为所有的主流屏幕去生成对应百分比的值,每个尺寸都会有一个values文件夹。存在一些问题:产生大量的文件夹,适配不了特殊的尺寸(必须建立默认的文件夹)

    • 第二篇和第三篇:这两篇属于一样的了,主要是基于Google推出的百分比布局,已经很大程度解决了适配的问题。存在一些问题:使用起来比较反人类,因为设计图上标识的都是px,所以需要去计算百分比,然后这个百分比还是依赖父容器的,设计图可能并不会将每个父容器的尺寸都标识出来,所有很难使用(当然,有人已经采用自动化的工具去计算了)。还有个问题就是,因为依赖于父容器,导致ScrollView,ListView等容器内高度无法使用百分比。

    可以看到都存在一些问题,或多或少都需要进行一些额外的工作,然而我希望适配是这样的:

    • 拿到设计图,meta信息中填入设计图的尺寸,然后不需要额外计算,布局直接抄设计图上的尺寸,不产生任何多余的资源文件,完成各种分辨率的适配!

    二、直观的体验

    假设我们拿到一张设计图:

    这样的设计图开发中很常见吧,有些公司可能需要自己去测量。

    按照我们的思想:

    布局直接抄设计图上的尺寸

    对于,新增旅客我们的布局文库应该这么写:

    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="86px"
    android:layout_marginTop="26px"
    android:background="#ffffffff">
    
    <ImageView
        android:id="@+id/id_tv_add"
        android:layout_width="34px"
        android:layout_height="34px"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="276px"
        android:layout_marginTop="26px"
        android:src="@mipmap/add"
        />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="26px"
        android:layout_toRightOf="@id/id_tv_add"
        android:text="新增旅客"
        android:textColor="#1fb6c4"
        android:textSize="32px"
        />
    </RelativeLayout>

    来张组合图,感受一下:

    感受完了,想一想,按照这种方式去写布局你说爽不爽。

    ok,那么对于Item的布局文件,就是这么写:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="108px"
        android:layout_marginTop="26px"
        android:background="#ffffffff"
        >
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="22px"
            android:layout_marginTop="16px"
            android:text="王大炮 WANG.DAPAO"
            android:textColor="#333"
            android:textSize="28px"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="16px"
            android:layout_marginLeft="22px"
            android:text="护照:G50786449"
            android:textColor="#999"
            android:textSize="26px"
            />
    
    </RelativeLayout>

    看到这,我相信,你现在最大的疑问就是:你用的px,px能完成适配?搞笑吧?

    那么首先说一下:这个px并不代表1像素,我在内部会进行百分比化处理,也就是说:720px高度的屏幕,你这里填写72px,占据10%;当这个布局文件运行在任何分辨率的手机上,这个72px都代表10%的高度,这就是本库适配的原理。

    接下来:看下不同分辨率下的效果:

    768*1280,Andriod 4.4.4

    480*800,Android 2.3.7

    上述两个机器的分辨率差距相当大了,按照百分比的规则,完美实现了适配,最为重要的是:

    • 再也不用拿着设计稿去想这控件的宽高到底取多少dp
    • 再也不用去为多个屏幕去写多个dimens
    • 再也不用去计算百分比了(如果使用百分比控件完成适配)
    • 再也不用去跟UI MM去解释什么是dp了

    接下来说下用法。

    本库的地址:https://github.com/hongyangAndroid/AndroidAutoLayout

    三、用法

    用法

    (1)注册设计图尺寸

    autolayout引入

    dependencies {
        compile project(':autolayout')
    }

    对于eclipse的伙伴,只有去copy源码了~~

    在你的项目的AndroidManifest中注明你的设计稿的尺寸。

    <meta-data android:name="design_width" android:value="768"></meta-data>
    <meta-data android:name="design_height" android:value="1280"></meta-data>
    

    (2)Activity中开启设配

    • 让你的Activity去继承AutoLayoutActivity

    ok,非常简单的两部即可引入项目,然后,然后干嘛?

    然后就按照上个章节的编写方式开始玩耍吧~


    ok,上面是最简单的用法,当然你也可以不去继承AutoLayoutActivity来使用。

    AutoLayoutActivity的用法实际上是完成了一件事:

    • LinearLayout -> AutoLinearLayout
    • RelativeLayout -> AutoRelativeLayout
    • FrameLayout -> AutoFrameLayout

    如果你不想继承AutoLayoutActivity,那么你就得像Google的百分比库一样,去用AutoXXXLayout代替系统原有的XXXLayout。当然,你可以放心的是,所有的系统属性原有的属性都会支持,不过根布局上就不支持px的自动百分比化了,但是一般根布局都是MATCH_PARENT,而上述的方式,根布局也是可以直接px的百分比化的。

    四、注意事项

    (1)如何开启PreView

    大家都知道,写布局文件的时候,不能实时的去预览效果,那么体验真的是非常的不好,也在很大程度上降低开发效率,所以下面教大家如何用好,用对PreView(针对该库)。

    首先,你要记得你设计稿的尺寸,比如 768 * 1280

    然后在你的PreView面板,选择分辨率一致的设备:

    然后你就可以看到最为精确的预览了:

    两个注意事项:

    1. 你们UI给的设计图的尺寸并非是主流的设计图,该尺寸没找到,你可以拿显示器砸他自己去新建一个设备。
    2. 不要在PreView中去查看所有分辨率下的显示,是看不出来适配效果的,因为有些计算是动态的。

    (2)关于TextView

    TextView这个控件呢,可能和设计稿上会有一些出入,并非是此库的原因,而是与生俱来的特性。

    比如:

    <TextView
     textSize="32px"
     layout_height="wrap_contnt"
     />

    你去运行肯定不是32px的高度,文字的上下方都会有一定的空隙。如何你将高度写死,也会发现文字显示不全。

    恩,所以呢,灵活应对这个问题,对于存在字体标识很精确的值,你可以选择:对于TextView与其他控件的上下边距呢,尽可能的稍微写小一点。

    其实我上面的例子,几乎都是TextView,所有我在编写Item里面的时候,也有意缩小了一下marginTop值等。不过,对于其他控件是不存在这样的问题的。

    ps:因为TextView的上述问题:所以对于居中,虽然可以使用本库通过编写margin_left,margin_top等很轻松的完成居中。但是为了精确起见,还是建议使用gravitycenterInXXX等属性完成。

    (3) 指定设置的值参考宽度或者高度

    由于该库的特点,布局文件中宽高上的1px是不相等的,于是如果需要宽高保持一致的情况,布局中使用属性:

    app:layout_auto_basewidth="height",代表height上编写的像素值参考宽度。

    app:layout_auto_baseheight="width",代表width上编写的像素值参考高度。

    如果需要指定多个值参考宽度即:

    app:layout_auto_basewidth="height|padding"

    用|隔开,类似gravity的用法,取值为:

    • width,height
    • margin,marginLeft,marginTop,marginRight,marginBottom
    • padding,paddingLeft,paddingTop,paddingRight,paddingBottom
    • textSize.

    (4)将状态栏区域作为内容区域

    如果某个Activity需要将状态栏区域作为实际的内容区域时,那么可用高度会变大,你所要做的只有一件事:让这个Activity实现UseStatusBar接口(仅仅作为标识左右,不需要实现任何方法),当然你肯定要自己开启windowTranslucentStatus或者设置FLAG_TRANSLUCENT_STATUS

    注意:仅仅是改变状态栏颜色,并不需要实现此接口,因为并没有实际上增加可用高度。

    五、其他

    目前支持属性

    • layout_width
    • layout_height
    • layout_margin(left,top,right,bottom)
    • pading(left,top,right,bottom)
    • textSize
    • 不会影响系统所有的其他属性,以及不会影响dp,sp的使用

    性能的提升

    通过本库的方式去编写代码,可以在很大程序上使用margin,也就是说,对于View的位置非常好控制,从而能够减少非常多的嵌套,甚至任何一个复杂的界面做到无嵌套。

    以及,几乎不需要去使用RelativeLayout的规则了,比如rightOf,完全可以由marginLeft完成,其他的rule同理。

    对于LinearLayout的weight,几乎也不需要使用了,比如屏幕宽度720px,想要四个控件横向均分,完全可以写layout_width="180px"

    我相信通过上述的介绍,你已经了解的本库适配的做法,而且可以说是我见过的最方便的适配方案,最大化的减轻了适配的负担,甚至比你不适配时编写UI都方便。目前本库,已经尝试用于项目中,尽可能去发现一些潜在的问题。

    本库的地址:https://github.com/hongyangAndroid/AndroidAutoLayout,欢迎各位一起完善,让适配问题消失在我们的痛苦中。

    ok,最后,只有去体验了,才能发现优点和缺点~~


    ps:对于使用,尽可能参考github上的readme,博文没办法做到一直修改适应新的变化,使用版本也尽可能使用github上提供的最新版本。


    欢迎关注我的微博:
    http://weibo.com/u/3165018720


    群号:514447580,欢迎入群

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

    展开全文
  • 移动端几种前端适配的方法讲解

    千次阅读 2016-05-19 17:27:09
    目前我所知道是有几种方法来做适配:   1.使用rem单位来网页适配,这个是我比较推荐的一种,效果很好,浏览器的兼容性也不错 只要一行代码就能适配多个分辨率终端   (function(doc,win){ var docEl =doc....
  • android屏幕适配之精准适配

    千次阅读 2016-01-01 10:10:36
    (1554068430@qq.com)(android精准适配工具)最近这段时间项目要做适配,在网上方便的方法。后来根据http://blog.csdn.net/jdsjlzx/article/details/45891551文章最后提出的适配思路,进行了总结优化做出了一套...
  • 给手机高度和宽度的适配

    千次阅读 2018-01-15 14:10:28
    在不同型号大小的手机中,我们需要为手机做适配来保证我妈们想要达到的需求。(移动端的单位是rem) 给手机(高度)做适配的代码,其中 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 var height=...
  • android【屏幕适配

    2017-12-10 15:31:58
    移动开发技术 如何做适配 关于Android如何屏幕适配
  • Android8.0适配之一应用图标适配

    千次阅读 2018-03-13 09:23:03
    target在26以下,不用做适配。 如果设置target=26及以上,在8.0不做适配,就会显示成一个圆圈包围着logo,不好看。 2、Android 8.0应用图标适配原理: 应用图标分为2层:前景层(logo层)和背景层(只能定义...
  • Android 屏幕适配方案

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

    2018-03-23 10:33:38
    安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配安卓适配...
  • 如何去UI适配

    千次阅读 2015-06-24 17:44:01
    今天想了下,怎么去UI适配。前年去支付宝面试,这个问题感觉被鄙视了。哎呀呀。。。简直不能忍。这答案有很大的问题?  这个答案是我原创。有任何问题,有任何补充,欢迎来讨论!!! 1. 观念上:要得到...
  • flutter 屏幕适配 字体大小适配

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

    千次阅读 2019-09-24 14:15:33
    初步了解业务后就被要求去做适配测试,整个适配测试过程简直就是混乱不堪极其痛苦的过程,所以想总结以下以前的适配测试的经验,与大家交流下。 什么要进行适配测试 为什么要进行适配测试呢?现在市场上存在五花八门...
  • 移动端适配

    万次阅读 多人点赞 2018-11-04 21:16:12
    一直以来,我都觉得前端要移动端的适配都是比较麻烦的事情,现在花一点时间总结一下移动端适配的各种方案,这总结有可能不能很全面,希望以后陆续可以补充完整。 主流的移动端屏幕以及一些概念 viewport视口 我们...
  • 移动端时代,我们该如何做适配呢?H5页面移动端适配屏幕的各种解决方案
  • android适配

    2015-06-26 15:15:52
    android适配,语言适配,屏幕适配,平台版本的适配(使应用程序在不同版本的系统中平稳运行)
  • 该源码案例是一款Masonry适配完美支持屏幕适配,源码XXFMasonryTest,Masonry适配 完美支持屏幕适配。 测试环境:Xcode 6.2,iOS 6.0以上
  • 现在讲一下笔者最近遇到的问题,公司项目需求,一颗树,树有很有枝桠,枝桠上面要挂红包,这需求是真坑爹,精度要求特别高,这肯定不能使用DP适配了,最开始想自己根据屏幕分辨率来做适配,设计图是750*1334的,我...
  • vant实现移动端的适配

    千次阅读 2019-12-16 18:48:34
    最近公司一个移动端的项目,需要做适配,框架本身是提供了vue-cli3.0结合lib-flexible和px2rem实现移动端适配的方案,这里记录下自己做适配的方法。
  • 屏幕适配之图片适配

    千次阅读 2017-09-19 09:19:56
    屏幕适配总共有6种(我知道的):图片适配,dimens适配,布局(Layout)适配,权重适配,百分比适配; 今天只说图片适配:图片适配主要是根据不同的手机密度,设置显示不同大小的图片; 下面首先说明下我们为什么要...
  • 大厂是怎么移动端适配

    千次阅读 2020-04-15 08:35:25
    前言随着Web技术的革新,移动端适配方案也在不断的变化,网上有很多关于移动端适配的文章,说什么rem布局已经过时,vm适配才是最好的适配方案。有这种理解的同学是错误的,任何适配方案都有它...
  • IOS 暗黑模式适配前言适配DarkMode一 .图片适配二.颜色适配1.系统动态色值2.定义颜色三. UITextField 适配模式配置一....不过现在很多App开始适配暗黑模式,适配也应该起来了。顺便整理了一份适配方案,
  • Android屏幕适配smallestWidth适配尺寸文件,大部分尺寸,下载放在src/main/res下
  • 主要介绍了vue移动端适配最佳解决方案(亲测有效),小编觉得挺不错的,现在分享给大家,也给大家个参考。一起跟随小编过来看看吧
  • css中字体大小适配

    千次阅读 2018-09-26 20:47:23
    先说怎么做适配:只需要将每个关于长宽的参数单位由px(像素)换位vw即可。那么关键怎么装换? px 像素,我们通常使用的单位,如果html中的文字使用px作为大小单位的话,就会存在适配问题,即字体大小不能根据屏幕...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 323,429
精华内容 129,371
关键字:

如何做适配