码迷,mamicode.com
首页 > Web开发 > 详细

网页自适应的几种方式。

时间:2017-12-04 20:41:11      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:style   minimum   微信   elements   作用   scala   min   微信小程序   document   

微信小程序的像素大小使用rpx,rpx换算px屏幕宽度/750。

传统的自适应布局有几种:

响应式,根据屏幕大小配置多个样式文件。

使用em,rem.rem是页面的font-size尺寸,不同的页面设置不同的font-size。

    (function winInitFontSize(){
            window.onresize = initFontSize;
            function initFontSize(){
                var winWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
                //rem的基数设置大一点,可以减少误差
                document.getElementsByTagName("html")[0].style.fontSize = ((winWidth > 750 ? 750 : winWidth)/750) * 100 + ‘px‘;
            }
            initFontSize();
        })();

使用百分比或者flex,铺满屏幕,高度字体还使用px.

scale通过拉伸缩小页面自适应。直接写死viewport的宽度。这种方式不可以设置minimum-scale=1.0。

<meta name="viewport" content="width=375, user-scalable=no">

使用类似rpx的方式:

  width: calc((100vw / (750/16)) - 0.1px);
  height: calc((100vw / (750/30)) - 0.1px);

假如利用sass倒是可以设置变量,不用一条一条这样写。只是这种在浏览器中,有时会大得可怕。因为100是浏览器的宽度,而不是可使用的宽度。而将100vw写成100%会不起效果。可能100%是动态的,导致不起作用。

有新的收获了再来更新文档。

 

网页自适应的几种方式。

标签:style   minimum   微信   elements   作用   scala   min   微信小程序   document   

原文地址:http://www.cnblogs.com/wlxll/p/7978478.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!