zoukankan      html  css  js  c++  java
  • js动态适配移动端font-size,单位:rem

    比如:目前我手中有一张psd图,大小为640*1010,适配苹果5的手机

    方法步骤:

    1.我采用font-size=10px为640*1010手机的初始像素大小;  1rem=10px;

       此时psd上有一个文字的大小为20px,即当前我的字体大小用rem表示为:font-size:1rem  (psd上的大小为html上大小的2倍,so首先要除以2才能得到正确的px,之后换算rem再次除以2就ok了)

    适配各种手机的rem单位:

    2.获取我当前使用手机的   var windowWidth=$(this).innerWidth();

    3.比例换算获取当前使用手机的px:   windowWidth/M= 320/10  ========= (此时得到M值)

    4.将上部得到的x值赋值到当前使用手机页面的html标签里:    <html style="font-size:Mpx">

    补充:在页面加载的时候,用的rem单位,我遇到了页面先放大再缩小为正常的尺寸的事故。这种页面打开用户的体验效果大打折扣。

               所以我想到了一个简单的解决方法

              先隐藏页面的显示,先判断页面是否加载完成,完成后才显示代码

  • 相关阅读:
    基础DP背包
    哲学思絮01
    Vue使用ElementUI
    Vue-Mock数据
    Vue生命周期
    Vue实战之CURD
    读《间客》有感
    ASP.Net Core网站发布
    Cycling之 标签化
    Vue环境搭建
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/7615531.html
Copyright © 2011-2022 走看看