美文网首页
关于wap站的适配问题小记

关于wap站的适配问题小记

作者: sarry | 来源:发表于2016-04-08 17:59 被阅读205次

    问题: 设计师给了一个适配iphone6 plus的设计图。做好页面之后适配iphone4、5、6很困难,这个间距调好了,那个又不好了。很纠结也很苦恼。最开始的办法是用css3的media来查询,然后设置相应的值。这样的做法也不是很好。毕竟屏幕尺寸太多,根本适配不过来。有没有一种方法可以随着屏幕大小而变化呢?

    带着问题发现了很有用的一段回答,原文如下:

    在移动端可以做到适配不同的手机分辨率,如果保持整体缩放,没有设计上的差异可以不需要用到`media query`”

    假设设计师的视觉稿是按照iPhone6的宽度来设计的,即375px (如果是高清的视觉稿750/2=375)

    那么,我们可以完全按照视觉稿上的尺寸来赋值给元素的样式,比如视觉稿上的尺寸是80px,那么在css中就可以直接定义width:80px;  页面中所有的尺寸都这样来设置。

    当所有的网站所有的页面样式都设置好之后。

    我们需要做两件事情:

    1. 设置页面的rem大小

    ```css

    html {

    font-size: calc(100vw/3.75);  (vw是css3的一个单位,相对于视口的宽度,视口被均分为100单位的vw)

    }

    ```

    100vw是设备的宽度,除以3.75可以让1rem的大小在iPhone6下等于100px

    2. 替换页面中的单位,把所有的px单位替换成rem,除以100,比如前面的80px,就是0.8rem

    这样在iPhone6下,所有元素的尺寸还是和视觉稿的尺寸一样,而iphone5中,因为设备的宽度变小了,100vw/3.75得到的值,会相应的变小,即rem的单位值会变小,页面中所有的尺寸会等比例缩放。

    这样就可以做到针对任何分辨率的设备保持视觉一致了。

    最后,前面用到vw单位,但是低版本的设备可能不支持,那么就需要js来处理一下:

    ```javascript

    document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'

    ```

    之所以前面让1rem等于100px,而不是1rem等于1px,是因为在chrome下针对中文的最小字体是12px。

    当然,这种步骤是针对现在的状况改rem来做的,如果一开始就是使用rem,那么写css的时候,可以直接写rem单位,按视觉稿除以100,其实也没有什么计算过程。或者用预处理器的话,也可以写一个`px2rem`的函数,直接改这个函数就可以了。

    作者:sapjax

    链接:https://www.zhihu.com/question/21504656/answer/48542422

    来源:知乎

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



    于是,就尝试了上面的方法根据rem的特性实现随屏幕大小而变化的效果。暂时觉着这个办法很好。

    相关文章

      网友评论

          本文标题:关于wap站的适配问题小记

          本文链接:https://www.haomeiwen.com/subject/umdylttx.html