zoukankan      html  css  js  c++  java
  • 移动端布局的思考和rem的设置

    如下方法如有不正确的地方,欢迎指正

    前提: 设置稿750px

    目标:40px = 1rem

    js设置方法:(小于等于750屏幕等比缩放)

              ;(function (doc, win, undefined) {
              var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
                recalc = function () {
                  var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
                  if (clientWidth === undefined) return;
                  docEl.style.fontSize = 40 * (clientWidth / 750) + 'px';    
                };
              if (doc.addEventListener === undefined) return;
              win.addEventListener(resizeEvt, recalc, false);
              doc.addEventListener('DOMContentLoaded', recalc, false)
            })(document, window);

     css设置方法(750,640,375,320等比缩放):

            html{font-size:10px}
            /*媒体查询*/
            @media screen and (min-320px){
                        html{font-size:17.06px;}
                        }
            @media screen and (min-375px){
                        html{font-size:20px;}
                        }
            @media screen and (min-640px){
                        html{font-size:34.13px;}
                        }
            @media screen and (min-750px){
                        html{font-size:40px;}
                        }

     思考:如果根据ui设计图,所有内容都随着屏幕变大而变大,字体会变得超级大,这是不可取的,事实上pc端常用字体是12px,14px,16px,移动端也基本相同,所以段落文字可以不做等比缩放处理,对于标题,还有图片需要做等比缩放。所有单纯用百分比和px布局也是可以的。

  • 相关阅读:
    【RocketMQ之介绍】
    1. JVM体系结构概述
    技术贴
    http协议
    如何在2个小时之内掌握48个国际音标?
    托业全真高频词汇(一)
    三. 托业单词之业务拓展 Business Development
    二、托业单词之人事及管理 Personnel & Management
    一、托业单词之办公室事宜 Office matters
    VUE 之让数字四舍五入
  • 原文地址:https://www.cnblogs.com/zph666/p/7566860.html
Copyright © 2011-2022 走看看