流式布局&固定宽度&响应式&rem

咱们如今在切页面布局的使用经常使用的单位是px,这是一个绝对单位,web app的屏幕适配有不少中作法,例如:流式布局、限死宽度,还有就是经过响应式来作,可是这些方案都不是最佳的解决方法。html


1流式布局:前端

例如流式布局的解决方案有很多弊端,它虽然可让各类屏幕都适配,可是显示的效果极其的很差,由于只有几个尺寸的手机可以完美的显示出视觉设计师和交互最想要的效果。web

他们在页面布局的时候都是经过百分比来定义宽度,可是高度大都是用px来固定住,因此在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,可是高度仍是和原来同样,实际显示很是的不协调,这就是流式布局的最致命的缺点,每每只有几个尺寸的手机下看到的效果是使人满意的,其实不少视觉设计师应该没法接受这种效果,由于他们的设计图在大屏幕手机下看到的效果至关因而被横向拉长来同样。浏览器

 

二、固定宽度作法:app

固定页面宽度的作法,早期有些网站把页面设置成320的宽度,超出部分留白,这样作视觉,前端都挺开心,视觉在也不用被流式布局限制本身的设计灵感了,前端也不用在搞坑爹的流式布局。可是这种解决方案也是存在一些问题,例如在大屏幕手机下两边是留白的,还有一个就是大屏幕手机下看起来页面会特别小,操做的按钮也很小。iphone

 

3、响应式作法:布局

响应式这种方式在国内不多有大型企业的复杂性的网站在移动端用这种方法去作,主要缘由是工做大,维护性难,因此通常都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位,由于这样反而能够节约成本,不用再专门为本身的网站作一个web app的版本。字体

 

四、设置viewport进行缩放:网站

天猫的web app的首页就是采用这种方式去作的,以320宽度为基准,进行缩放,最大缩放为320*1.3 = 416,基本缩放到416都就能够兼容iphone6 plus的屏幕了,这个方法简单粗暴,又高效。spa

 

五、rem能等比例适配全部屏幕:

rem是经过根元素进行适配的,网页中的根元素指的是html咱们经过设置html的字体大小就能够控制rem的大小。

Html  { font-size:20px;}

.btn {width: 6rem; height: 3rem;line-height: 3rem; font-size: 1.2rem;display: inline-block;ackground: #06c; color: #fff; border-radius: .5rem; text-decoration: none; text-align: center; }

只需改变html中font-size的值,全部元素的宽高、字体大小、间距都会发生改变。

咱们能够看到无论在任何分辨率下,页面的排版都是按照等比例进行切换,而且布局没有乱。咱们能够看到无论在任何分辨率下,页面的排版都是按照等比例进行切换,而且布局没有乱。

我只是经过一段js根据浏览器当前的分辨率改变font-size的值,就简单的实现了上面的效果,页面的全部元素都不须要进行任何改变。

 

6怎么计算出不一样分辨率下htmlfont-size的值?

首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给个人前提下,(固然这个尺寸确定不必定是640,能够是320,或者480,又或是375)来看一组表格。

 

上面的表格蓝色一列是Demo3中页面的尺寸,页面是以640的宽度去切的,怎么计算不一样宽度下font-site的值,你们看表格上面的数值变化应该能明白。举个例子:384/640 = 0.6,384是640的0.6倍,因此384页面宽度下的font-size也等于它的0.6倍,这时384的font-size就等于12px。在不一样设备的宽度计算方式以此类推。

固然也能够用媒体查询进行设置html中的font-size的值:

html {

    font-size : 20px;

}

@media only screen and (min-width: 401px){

    html {

        font-size: 25px !important;

    }

}

@media only screen and (min-width: 428px){

    html {

        font-size: 26.75px !important;

    }

}

@media only screen and (min-width: 481px){

    html {

        font-size: 30px !important; 

    }

}

@media only screen and (min-width: 569px){

    html {

        font-size: 35px !important; 

    }

}

@media only screen and (min-width: 641px){

    html {

        font-size: 40px !important; 

    }

}

上面的作的设置固然是不能全部设备全适配,可是用JS是能够实现全适配。具体用哪一个就要根据本身的实际工做场景去定了。

相关文章
相关标签/搜索