精华内容
下载资源
问答
  • 原文地址 ... viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=... 最好还是做适配分辨率的图片。有很多方法可以做到同样效果,服务器端和客户端都可以实现。

    原文地址


    允许网页宽度自动调整

      "自适应网页设计"到底是怎么做到的?其实并不难。

      首先,在网页代码的头部,加入一行viewport元标签。

      viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

      所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

     

      三、不使用绝对宽度

      由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

      具体说,CSS代码不能指定像素宽度:

      width:xxx px;

      只能指定百分比宽度:

      width: xx%;

      或者

      width:auto;

     

      四、相对大小的字体

      字体也不能使用绝对大小(px),而只能使用相对大小(em)。

      body {

      font: normal 100% Helvetica, Arial, sans-serif;

      上面的代码指定,字体大小是页面默认大小的100%,即16像素。

      h1 {

      font-size: 1.5em;

      然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

      small {

      font-size: 0.875em;

      small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

     

      五、流动布局(fluid grid)

      "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。

      .main {

      float: right;

      width: 70%;

      .leftBar {

      float: left;

      width: 25%;

      float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

      另外,绝对定位(position: absolute)的使用,也要非常小心。

     

      六、选择加载CSS

      "自适应网页设计"的核心,就是CSS3引入的Media Query模块。

      它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

      media="screen and (max-device-width:400px)"

      href="tinyScreen.css"/>

      上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

      media="screen and (min-width:400px) and (max-device-width:600px)"

      href="smallScreen.css"/>

      如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

      除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

     

      七、CSS的@media规则

      同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

      @media screen and (max-device-width: 400px) {

      .column {

      float: none;

      width:auto;

      #sidebar {

      display:none;

      上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

     

      八、图片的自适应(fluid image)

      除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。

      这只要一行CSS代码:

      img { max-width: 100%;}

      这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

      img, object { max-width: 100%;}

      老版本的IE不支持max-width,所以只好写成:

      img { width: 100%; }

      此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

      img { -ms-interpolation-mode: bicubic; }

      或者,Ethan Marcotte的imgSizer.js。

      addLoadEvent(function() {

      var imgs = document.getElementById("content").getElementsByTagName("img");

      imgSizer.collate(imgs);

    }); 

      最好还是做适配分辨率的图片。有很多方法可以做到同样效果,服务器端和客户端都可以实现。

    展开全文
  • 7个步骤PC网站自动适配手机网页

    千次阅读 2016-10-05 18:27:15
    通过移动适配技术可以实现,切图网是国内首家基于web技术服务的公司,而移动适配主要通过底层的web技术开发手段来完成,下面切图网将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃! 1允许网页...

    传统的网站如何完成向移动设备的快速转型? 通过移动适配技术可以实现,切图网是国内首家基于web技术服务的公司,而移动适配主要通过底层的web技术开发手段来完成,下面切图网将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃!

    1允许网页宽度自动调整

    “自适应网页设计”到底是怎么做到的?其实并不难。

    首先,在网页代码的头部,加入一行viewport元标签。

    viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

    所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

    2、不使用绝对宽度

    由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

    具体说,CSS代码不能指定像素宽度:

    width:xxxpx;

    只能指定百分比宽度:

    width:xx%;

    或者

    width:auto;

    3、相对大小的字体

    字体也不能使用绝对大小(px),而只能使用相对大小(em)。

    body{

    font:normal100%Helvetica,Arial,sans-serif;

    }

    上面的代码指定,字体大小是页面默认大小的100%,即16像素。

    h1{

    font-size:1.5em;

    }

    然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

    small{

    font-size:0.875em;

    }

    small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

    4、流动布局(fluidgrid)

    “流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。

    .main{

    float:right;

    width:70%;

    }

    .leftBar{

    float:left;

    width:25%;

    }

    float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

    另外,绝对定位(position:absolute)的使用,也要非常小心。

    5、选择加载CSS

    “自适应网页设计”的核心,就是CSS3引入的MediaQuery模块。

    它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

    media=”screenand(max-device-width:400px)”

    href=”tinyScreen.css”/>

    上面的代码意思是,如果屏幕宽度小于400像素(max-device-width:400px),就加载tinyScreen.css文件。

    media=”screenand(min-width:400px)and(max-device-width:600px)”

    href=”smallScreen.css”/>

    如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

    除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

    6、CSS的@media规则

    同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

    @mediascreenand(max-device-width:400px){

    .column{

    float:none;

    width:auto;

    }

    #sidebar{

    display:none;

    }

    }

    上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

    7、图片的自适应(fluidimage)

    除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。

    这只要一行CSS代码:

    img{max-width:100%;}

    这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

    img,object{max-width:100%;}

    老版本的IE不支持max-width,所以只好写成:

    img{width:100%;}

    此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

    img{-ms-interpolation-mode:bicubic;}

    或者,EthanMarcotte的imgSizer.js。

    addLoadEvent(function(){

    varimgs=document.getElementById(“content”).getElementsByTagName(“img”);

    imgSizer.collate(imgs);

    });

    最好还是做适配分辨率的图片。有很多方法可以做到同样效果,服务器端和客户端都可以实现。

    展开全文
  • Nginx配置网站适配PC和手机

    千次阅读 2016-03-26 17:33:18
    考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版...要想让网站适配PC和手机设备,首先要能做出准确的判断。HTTP请求的Header中的User-Agent可以区分客户端的浏览器类型,可以通过User-Agent来判断客户

    考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本。访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面。

    1、判断客户端的设备类型

    要想让网站适配PC和手机设备,首先要能做出准确的判断。HTTP请求的Header中的User-Agent可以区分客户端的浏览器类型,可以通过User-Agent来判断客户端的设备。

    无论是PC还是手机,由于操作系统、浏览器的多样性,自己来实现这个判断并不容易。好在国外有一套开源的通过User-Agent区分PC和手机的解决方案,可以直接使用:

    http://detectmobilebrowsers.com/

    由于本文使用Nginx,只要在网站上下载Nginx配置即可。

    set $mobile_rewrite do_not_perform;
    
    if ($http_user_agent ~* "(androidbb\d+meego).+mobileavantgobada\/blackberryblazercompalelainefennechiptopiemobileip(honeod)iriskindlelge maemomidpmmpmobile.+firefoxnetfrontopera m(obin)ipalm( os)?phonep(ixire)\/pluckerpocketpspseries(46)0symbiantreoup\.(browserlink)vodafonewapwindows cexdaxiino") {
      set $mobile_rewrite perform;
    }
    
    if ($http_user_agent ~* "^(1207631065903gso4thp50[1-6]i770s802sa waabacac(eroos\-)ai(korn)al(avcaco)amoian(exnyyw)aptuar(chgo)as(teus)attwau(di\-mr s )avanbe(ckllnq)bi(lbrd)bl(acaz)br(ev)wbumbbw\-(nu)c55\/capiccwacdm\-cellchtmcldccmd\-co(mpnd)crawda(itllng)dbtedc\-sdevidicadmobdo(cp)ods(12\-d)el(49ai)em(l2ul)er(ick0)esl8ez([4-7]0oswaze)fetcfly(\-_)g1 ug560genegf\-5g\-mogo(\.wod)gr(adun)haiehcithd\-(mpt)hei\-hi(ptta)hp( iip)hs\-cht(c(\- _agpst)tp)hu(awtc)i\-(20goma)i230iac( \-\/)ibroideaig01ikomim1kinnoipaqirisja(tv)ajbrojemujigskddikejikgt( \/)klonkpt kwc\-kyo(ck)le(noxi)lg( g\/(klu)5054\-[a-w])libwlynxm1\-wm3gam50\/ma(teuixo)mc(0121ca)m\-crme(rcri)mi(o8oats)mmefmo(0102bidedot(\- ov)zz)mt(50p1v )mwbpmywan10[0-2]n20[2-3]n30(02)n50(025)n7(0(01)10)ne((cm)\-ontfwfwgwt)nok(6i)nzpho2imop(tiwv)oranowg1p800pan(adt)pdxgpg(13\-([1-8]c))philpirepl(ayuc)pn\-2po(ckrtse)proxpsiopt\-gqa\-aqc(0712213260\-[2-7]i\-)qtekr380r600raksrim9ro(vezo)s55\/sa(gemammmsnyva)sc(01h\-oop\-)sdk\/se(c(\-01)47mcndri)sgh\-sharsie(\-m)sk\-0sl(45id)sm(alarb3itt5)so(ftny)sp(01h\-v\-v )sy(01mb)t2(1850)t6(001018)ta(gtlk)tcl\-tdg\-tel(im)tim\-t\-moto(plsh)ts(70m\-m3m5)tx\-9up(\.bg1si)utstv400v750verivi(rgte)vk(405[0-3]\-v)vm40vodavulcvx(52536061708081838598)w3c(\- )webcwhitwi(g ncnw)wmlbwonux700yas\-yourzetozte\-)") {
      set $mobile_rewrite perform;
    }
    
    if ($mobile_rewrite = perform) {
      # 手机
    }

    Nginx通过以上的配置,获取HTTP请求的User-Agent,使用正则表达式来匹配手机设备。

    2、根据设备适配不同的页面

    首先要准备好网站的PC版和手机版两套页面,通过之前对设备的判断,来反向代理到不同的版本:

    location / {
        proxy_pass http://192.168.20.1;  # 电脑版
        if ($mobile_rewrite = perform) {
            proxy_pass http://192.168.20.2;  # 手机版
        }
    }

    如果是静态页面不需要反向代理,那么用root替换proxy_pass:

    location / {
        root /html/pc;
        if ($mobile_rewrite = perform) {
            root /html/mobile;
        }
    }

    3、手机版链接到PC版

    在用户打开页面后,如果进入了手机版,可能由于错误判断设备,或者用户想获取更多信息,可能会需要打开PC版。在手机版页面的底部,通常会有一个链接指向PC版:

    可以通过在点击“电脑版”链接的时候用JavaScript设置一个Cookie来实现这个功能:

    <a href="http://xxx.com/" onclick="document.cookie = "gotopc=true"">电脑版</a>

    同时在Nginx配置中加入判断,如果包含此Cookie则进入PC版:

    if ($http_cookie ~ "gotopc=true") {
    	set $mobile_rewrite do_not_perform;
    }

    4、调试

    完成以上配置后,可以通过Chrome浏览器来模拟手机、平板电脑等设备。

    最后给出完整的Nginx配置:

    server {  
        listen 80;
        
        set $mobile_rewrite do_not_perform;
        
        if ($http_user_agent ~* "(androidbb\d+meego).+mobileavantgobada\/blackberryblazercompalelainefennechiptopiemobileip(honeod)iriskindlelge maemomidpmmpmobile.+firefoxnetfrontopera m(obin)ipalm( os)?phonep(ixire)\/pluckerpocketpspseries(46)0symbiantreoup\.(browserlink)vodafonewapwindows cexdaxiino") {
            set $mobile_rewrite perform;
        }
        
        if ($http_user_agent ~* "^(1207631065903gso4thp50[1-6]i770s802sa waabacac(eroos\-)ai(korn)al(avcaco)amoian(exnyyw)aptuar(chgo)as(teus)attwau(di\-mr s )avanbe(ckllnq)bi(lbrd)bl(acaz)br(ev)wbumbbw\-(nu)c55\/capiccwacdm\-cellchtmcldccmd\-co(mpnd)crawda(itllng)dbtedc\-sdevidicadmobdo(cp)ods(12\-d)el(49ai)em(l2ul)er(ick0)esl8ez([4-7]0oswaze)fetcfly(\-_)g1 ug560genegf\-5g\-mogo(\.wod)gr(adun)haiehcithd\-(mpt)hei\-hi(ptta)hp( iip)hs\-cht(c(\- _agpst)tp)hu(awtc)i\-(20goma)i230iac( \-\/)ibroideaig01ikomim1kinnoipaqirisja(tv)ajbrojemujigskddikejikgt( \/)klonkpt kwc\-kyo(ck)le(noxi)lg( g\/(klu)5054\-[a-w])libwlynxm1\-wm3gam50\/ma(teuixo)mc(0121ca)m\-crme(rcri)mi(o8oats)mmefmo(0102bidedot(\- ov)zz)mt(50p1v )mwbpmywan10[0-2]n20[2-3]n30(02)n50(025)n7(0(01)10)ne((cm)\-ontfwfwgwt)nok(6i)nzpho2imop(tiwv)oranowg1p800pan(adt)pdxgpg(13\-([1-8]c))philpirepl(ayuc)pn\-2po(ckrtse)proxpsiopt\-gqa\-aqc(0712213260\-[2-7]i\-)qtekr380r600raksrim9ro(vezo)s55\/sa(gemammmsnyva)sc(01h\-oop\-)sdk\/se(c(\-01)47mcndri)sgh\-sharsie(\-m)sk\-0sl(45id)sm(alarb3itt5)so(ftny)sp(01h\-v\-v )sy(01mb)t2(1850)t6(001018)ta(gtlk)tcl\-tdg\-tel(im)tim\-t\-moto(plsh)ts(70m\-m3m5)tx\-9up(\.bg1si)utstv400v750verivi(rgte)vk(405[0-3]\-v)vm40vodavulcvx(52536061708081838598)w3c(\- )webcwhitwi(g ncnw)wmlbwonux700yas\-yourzetozte\-)") {
            set $mobile_rewrite perform;
        }
        
        if ($http_cookie ~ "gotopc=true") {
            set $mobile_rewrite do_not_perform;
        }
        
        location / {
            proxy_pass http://192.168.20.1;  # 电脑版
            if ($mobile_rewrite = perform) {
                proxy_pass http://192.168.20.2;  # 手机版
            }
        }
    }

    展开全文
  • 手机主流适配

    千次阅读 2017-07-04 00:01:51
    手机主流适配 在android中设配一直是程序员最头疼的一个问题,那么问题来了,web前端不需要么-----的确不需要,web前端一般是百分比适配; ok~接下来详细介绍一下: 首先在android的layout中不可以使用px,因为不同的...

    手机主流适配

    在android中设配一直是程序员最头疼的一个问题,那么问题来了,web前端不需要么—–的确不需要,web前端一般是百分比适配;
    ok~接下来详细介绍一下:
    首先在android的layout中不可以使用px,因为不同的机型,用相同的px,dp值会不同,进而会造成布局的不同;影响极大.

    1.图片适配

    在res下drawable创建不同的drawable文件夹,在这里不建议使用mipmap,因为在as中mipmap中.9图无法识别
    drawable;drawable-hpi;drawable-mdpi;drawable-xhdpi;drawable-xxhdpi;drawable-xxxhpi;

    2.百分比适配

    百分比适配可以很好解决机型的不适配,但是在android中weight<权重>只可以在linearlayout中实现,所以具有一定的局限性

        <LinearLayout
                android:id="@+id/bottom_btn"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:background="@color/colorWhite">
    
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">
    
                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@drawable/tab_find_selector"/>
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="1dp"
                        android:text="找驾校"
                        android:textSize="10sp"/>
                </LinearLayout>
    
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">
    
                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@drawable/tab_license_selector"/>
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="1dp"
                        android:text="考驾照"
                        android:textSize="10sp"/>
                </LinearLayout>
    
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">
    
                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@drawable/tab_mine_selector"/>
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="我的"
                        android:textSize="10sp"/>
                </LinearLayout>
    
            </LinearLayout>

    3.dimen尺寸适配

    ok~其实以上两种适配比较简单,虽然dp为像素无关量,在不同的机型影响较小,但是也会有一定影响;所以需要匹配不同机型出不同value
    在之前需要手动来配置,各种生成jar也参差不穷,综合来看,利用代码生成不同value下的x,y还是比较靠谱的<看不同没有关系,继续往下看>;下面看关键代码—->run—–>会在project下生成res,移到你的香炉里就ok;

    package com.example.test;
    
    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 = 480;
            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();
        }
    
    }
    

    姑且看作一个生成不同dimen的一个tool类 ,可以配置相关参数来生成 所需要的value进行尺寸适配
    这里写图片描述

    可以看到在每一个value下面有lay_x.xml和lay_y.xml,前者代表width,后者代表height;ok~看里面部分代码:

    <dimen name="x47">117.5px</dimen>
    <dimen name="x48">120.0px</dimen>
    <dimen name="x49">122.5px</dimen>
    <dimen name="x50">125.0px</dimen>
    <dimen name="x51">127.5px</dimen>
    <dimen name="x52">130.0px</dimen>
    <dimen name="x53">132.5px</dimen>
    <dimen name="x54">135.0px</dimen>
    <dimen name="x55">137.5px</dimen>
    <dimen name="x56">140.0px</dimen>
    <dimen name="x57">142.5px</dimen>
    <dimen name="x58">145.0px</dimen>
    <dimen name="x59">147.5px</dimen>
    <dimen name="x60">150.0px</dimen>
    <dimen name="x61">152.5px</dimen>
    <dimen name="x62">155.0px</dimen>
    <dimen name="x63">157.5px</dimen>
    <dimen name="x64">160.0px</dimen>
    <dimen name="x65">162.5px</dimen>
    <dimen name="x66">165.0px</dimen>

    前面的xx是代表dp,后面代表px,在代码中引入合适的dp<可以看作百分比,即x1,x2…>,就胡转换为正确px,这样就不会担心机型尺寸的不适配了~有没有感觉这样看来适配很简单

    展开全文
  • web适配手机端开发总结

    千次阅读 2018-03-16 16:30:13
    现在手机端也业务要多于pc端,...适配手机端我主要总结3点: 1. 在页面顶部加meta,它的大概意思就是页面1:1显示,用户禁止缩放,加载html页面的head中 代码如下。 <meta name="viewport" content="width=de...
  • PC端网页适配手机端网页

    千次阅读 2019-05-24 18:17:04
    PC端网页适配手机端网页
  • 怎么PC端的页面快速适配手机

    千次阅读 2020-09-27 09:59:10
    好不容易做了一些看起来还算精致的页面,突然客户居然提出个奇怪的问题——“你们的项目没有适配手机端” ???看到这一行字的我,内心是懵逼加崩溃的。设计稿是1920像素的宽度,主体部分宽度为1200像素,这是妥妥...
  • android 手机适配之values适配dimen值

    千次阅读 2016-08-03 16:47:45
    但是我在阅读的时候还是有点疑问,这个values-1920x1080到底是dp值还是手机分辨率,因为我在实际操作中发现这样一句话. 很明显可以看到在我写的1920 * 1080上方有一句话 Screen dimension in dp ,
  • Canvas适配手机

    万次阅读 2017-03-13 22:46:34
    Canvas适配困境最近做了个H5小游戏,它的主页的html代码如下:!DOCTYPE html> ,initial-scale=1,maximum-scale=1,user-scalable=no">
  • CocosCreator适配手机

    2019-03-01 21:02:51
  • vue:手机适配

    万次阅读 2018-05-11 17:29:41
    下载lib-flexible npm i lib-flexible --save 在main.js中引入lib-flexible import 'lib-flexible/flexible' 查看index.js有没有添加meta标签 ...width=device-width,initial-scale=1....
  • HTML页面适配手机移动端窗口宽度

    万次阅读 2018-03-21 22:14:29
    随着网络的快熟发展,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?...很多网站的做法是对不...
  • 手机适配网页

    千次阅读 2018-10-10 19:08:49
    iPhone的屏幕尺寸各不相同,我说的是逻辑像素尺寸,这确实是人很头疼的事情。如果想用一套设计涵盖所有iPhone,就要选择逻辑像素折中的机型。 从市场占有率数据来看,目前最多的是iPhone5/5s的屏幕。倍率为2,...
  • 前言:关于这个问题就设计到了很多单位了,什么px、pt、dp、sp,手机尺寸,ppi等等,我这里只介绍我解除过比较靠谱的。如果你有更好的屏幕适配方案,请在评论区留下链接。非常感谢 一、最小宽度 限定符(推荐) 什么...
  • 关于JSP适配手机的问题

    千次阅读 2014-11-03 20:37:06
    经常遇到JSP网页需要适配手机设备的尺寸问题 解决:在头wen
  • 手机端JS适配代码

    千次阅读 2019-03-14 10:10:47
    手机适配的通用代码,但要注意将640修改为设计稿的宽度,将从设计稿量得的mpx(m为量得长度),除以100后加上单位rem &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-...
  • H5不同手机适配

    千次阅读 2017-09-18 13:53:33
    (function() { // window["__JS_CONFIG"] = { // "baseUrl": "./js/src", // //"urlArgs": "__ts=201604181703" // "urlArgs": "__ts=" + new Date().getTime() //
  • html页面适配手机端方法

    千次阅读 2020-04-19 11:15:07
    在head中加: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 注释: viewport :用户网页的可视区域. ...
  • h5手机适配字体设置

    千次阅读 2019-09-18 14:09:27
    手机端页面动态设置根元素,适配不同屏幕大小。 开始 <script> //rem为html的字体大小 通过改变html的字体大小达到适配的效果 remChange(); //监听屏幕改变resize事件 触发remChange方法 window....
  • html适配Anroid手机

    千次阅读 2014-05-11 10:46:39
    一、设置窗口尺寸和适配屏幕分辨率 谷歌官方文档提到两个大的方面。 1.Viewport视图窗口 这个是html中设置的。主要是设置高度和宽度,还有初始的比列。这个宽度与高度将绝对html里面CSS中有多少个像素可用。 ...
  • CSS3自适配手机屏幕

    千次阅读 2013-02-21 14:40:42
    用CSS3写的自适配手机屏幕【请使用支持html5的浏览器查看...Media Query Demos【CSS3自适配手机屏幕】 .wrapper {  border: solid 1px #666;   padding: 5px 10px;  margin: 40px; } .viewing-area sp
  • 手机端显示是 ![图片说明](https://img-ask.csdn.net/upload/201908/13/1565685789_321558.png) pc端显示 ![图片说明](https://img-ask.csdn.net/upload/201908/13/1565685817_57003.png) 现在是要...
  • 两款手机都是1080*1920的分辨率,一个手机又导航栏,一个手机没有,请问怎么适配
  • html5适配手机屏幕

    千次阅读 2017-03-28 15:06:52
    , initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 1、width=device-width :表示宽度是设备屏幕的宽度 2、initial-scale=1.0:表示初始的缩放比例 3、m

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 84,067
精华内容 33,626
关键字:

如何让网站适配手机