zoukankan      html  css  js  c++  java
  • 淘宝flexible.js的使用

    首先大家最关注的怎么使用,原理不原理是后面的事

    比如设计稿量来的宽度是100px

    那么我们布局的时候,就这么写{1.3333rem},1.3333rem是由100/75算出来的,以此类推200px,就是{ 2.6667} ,2.6667是由200/75计算得来

    大家会很奇怪,为什么是除以75,不是除以750,或者其他数字,难道每次都要用计算器去计算rem的值吗

    原理来了

    75这个数字是这么来的,75=750/10,就是把750分成10份,可以理解成75=1份,75px=1rem,相当于计算100/75,其实就是100里面有几份,也就是100里面有几个rem

    那要怎么实现等比缩放呢

    HtmlfontSize =(window. inner Width/750)*75

    然后设置 html font -size的值为HtmlfontSize 

    这里设置的就是1rem=HtmlfontSize 个px

     由此我们通过动态HtmlfontSize,实现了等比缩放,好像是实现了,但是还是有点懵

    为什么要这么做

    那就要自己尝试去实现等比缩放布局,还是以主流的750设计稿为例

    还是以100px为例,在375的屏幕宽度,我就要写成50px,在414的屏幕宽度我就要写成55.2px,我们很容易得到一个公式,当前的屏幕宽度/750 ,再乘以100,就得到我们所需要的尺寸,固定的是什么,变化的又是什么

    固定的是100px,控制缩放的是屏幕宽度/750的比率

    为了方便布局,那我给font-size设置  屏幕宽度/750的值

    然后布局我应该怎么写呢,貌似还是无从下手

    好了,编不下去了,自己去想把,有空再编

  • 相关阅读:
    如何重新加载 Spring Boot 上的更改,而无需重新启动服务器?
    FileUpload拦截器
    aspnet网页刷新
    查看SQL表的详细信息
    学习GDI+ (1)
    设计模式简单工厂模式
    对数据库表操作,统一的方法。
    随机产生300道四则运算
    略谈从计算机专业,再到软件构建的初识
    #在android studio中维护日程管理系统
  • 原文地址:https://www.cnblogs.com/zph666/p/11014865.html
Copyright © 2011-2022 走看看