移动端的适配方案

目录

  • 移动端的适配方案

    • 百分比适配
    • viewport缩放适配
    • DPR缩放适配
    • rem适配
    • hotcss适配(使用dpr+rem,简单好用)
    • vw/vh适配(为适配而生,最优方案)

移动端的适配方案

不同的尺寸的手机设备上,页面相对合理的展示(自适应)或者保持统一效果的等比缩放

百分比适配

根据父级计算百分比,需要配合其他布局使用

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
html,body{
    width:100%;
    .container{
        width:100%;
        div{
            float:left;
            width:25%;
        }
    }
}

viewport缩放适配

把所有机型的css像素设置成一致的,需要动态设置
缩放比公式: 缩放比 = css像素/375

<script>
    (function(){
        //获取CSS像素,需要确保缩放为1(minimum-scale=1,maximum-scale=1)
        let pageWidth = document.documentElement.clientWidth;
        let pageWidth = window.innerWidth;
        let pageWidth = window.screen.width;
        //求缩放比
        var scale = pageWidth / 375 ;
        //动态设置缩放比
        给meta标签设置id,用来获取元素
        document.getElementById("metaId").content=`initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`;
        *注意,一定不要设置width=device-weidth,以及一定要设置最大最小缩放比

    })()
</script>

缺陷:大设备图片失真,缩放比为小数容易出现误差等.

DPR缩放适配

把CSS像素缩放成与设备像素一致的尺寸

和viewport适配类似(反推),根据dpr的值,把视口缩放到和物理像素,也就是把css像素的值设置成物理像素,让所有设备都变成物理像素和css像素1:1的结果

公式:   dpr = 视口宽度/375

<script>
    (function(){
        //先要检查是否有这个标签,有则修改,无则创建
        var meta = document.querySelector("meta[name='viewport']");
        var scale = 1/window.devicePixelRatio;
        if(!meta){
           meta = document.createElement("meta");
           meta.name="viewport";
           mate.content=`width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`
           document.head.appendChild(meta)
        }else{
            //修改
            meta.setAttribute('content',`width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`)
        }

    })()
</script>

rem适配

rem的本质是计算元素占屏幕的百分比,单位rem需要设置到html标签上,代表屏幕每一列的宽度

设置rem的方式

  • 使用javascript动态设置方法1

      <.script>
          (function(){
              var root = document.documentElement; //根元素html
              var width = window.clientWidth;//设备的宽度
              root.style.fontSize = width/20+'px';     //20是指列,可随意设置,但一定要方便计算
    
          })()
      </.script>
      ______________________________________________________________
      切图流程:
          1.先设置rem
          2.量出元素在设计稿中的尺寸
          3.使用这个尺寸除以DPR(得看你使用的哪个设备做基准)
          4.然后换算成rem,这个rem值就是这个元素的值了
       元素在设计稿的尺寸/DPR/列  就是最终结果
  • 使用javascript动态设置rem方法二(推荐,重点推荐其扩展方法)
      <script>
          //此方法对性能有优化
          (function(doc,window,designWidth){      //文档,window,设计稿尺寸
              const root = doc.documentElement;
              const refreshRem = () => {
                  const clientWidth = root.clientWidth;
                  if(clientWidth >= designWidth){
                      root.style.fontSize = '100px';
                      //给宽度一个最大值,如果设备的宽度已经超过设计稿的尺寸了,统一按一个值去计算(第三个参数)
                  }else{
                      root.style.fontSize = 16 * clientWidth / 375 +'px';
                      //这么写是为了以iphone6为基准,iphone6的clientwidth就是375
                      //设备比iphone6宽的rem就是1的xx倍,小的就是0.xx倍
                      //并且iphone6的dpr为2,也是人的眼睛能分辨的极限了(高清屏),超过了人眼其实已经分辨不出来和高清屏的区别了
    
                      //扩展方法: (重点推荐此方法)root.style.fontSize=100*(clientWidth/designWidth)+'px'
                      //这种后续不需要对dpr处理,因为cw/dw已经对dpr处理了
                      //此方法易于换算
                      //此方法即vh、vw的原理,可使用vh/vw适配
                  }
              }
              doc.addEventListener('DOMContentLoaded',refreshRem)
          })(document,window,750)
      </script>
  • 使用媒体查询设置rem(了解)
      @media screen and (min-width:xxxpx){
          html{
              font-size:xxxpx
          }
      }

根据屏幕设备的区间(min-width)来设置font-size的值
ios9不支持ES6,要么使用es5写法,要么后续使用bable处理

hotcss适配(使用dpr+rem,简单好用)

其使用了dpr的原理和rem结合
开源项目地址:??直达

优点:直接使用在设计图中量出来的尺寸,无需进行计算转化,如元素量出来宽是187.5px,那么在scss/less文件中写为:

width:px2rem(187.5);

vw/vh适配(为适配而生,最优方案)

vw、vh是一个css单位(Viewport‘s Width,Viewport‘s Height)
vmin 取vw\vh中最小的值
vmax 取vw\vh中最大的值
横竖屏切换时,它们会互换
vw/vh是将屏幕宽高都分成100份,1vw为屏幕1%的宽度,1vh为屏幕1%的高度
优点:为适配而生,逮着就用,不需要转化
存在兼容性问题: IOS>=8 Android>=4.4

方案一:全页面使用vw
方案二: 通过vw设置根节点字体,然后使用rem适配,无需使用js

原文地址:https://www.cnblogs.com/hhyf/p/11875823.html

时间: 2024-11-05 18:29:46

移动端的适配方案的相关文章

移动端font-size适配方案(续)

概述 之前写过一篇移动端font-size适配方案,但是在实践过程中,还是发现当时的思维太局限了,视野太窄了,所以现在补充更新一下,记录下来,供以后开发时参考,相信对其他人也有用. 我上一篇博文主要有2个误区,下面我一一记下来. 这篇博文参考了移动端适配方案(下). 适配方案 有多种适配方案: 百分比布局:固定高度,宽度自适应.就是固定高度,宽度用百分比.可以想象,对于不同的屏幕,所有的东西都有横向拉伸,导致非常不好看. px布局:固定宽度,viewport缩放.就是全部用px,然后用js控制i

web移动端屏幕适配方案

因为手机屏幕的分辨率大小不一 ,如果使用传统的静态布局,把每个元素的宽高样式写死,在不同的屏幕中就有各种各样的显示效果.这显然不是我们想要的结果.我们需要的是根据屏幕分辨率的不同,来适配不同的样式大小.使不同的手机分辨率下都有相同的样式布局 1.rem适配 1rem就是html标签font-size的大小,在rem适配方案中,我们以rem作为基值来设定元素的大小.1rem单位越大,元素的大小也就越大,1rem单位越小,元素的大小也就越小 实现方法:通过js获取屏幕的分辨率来动态设置1rem的大小

PC端、移动端页面适配方案

前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 本文记录在java后端进行PC端.移动端页面适配的方案 工程结构 想要实现后端统一适配,首先要规范好工程结构 后端代码,跟之前差不多,响应的viewName路径,直接从业务模块开始,适配工作交给aop:两套页面,对应的业务模块,分别放在两个目录下面 aop适配器 统一的适配工作交由aop环绕切面进

移动端主流适配方案

1.流式布局(百分比布局)    案例:京东移动端 优点:简单方便,只需要固定高度,宽度自适应: 缺点:大屏幕手机实际显示的不协调. 2.响应式布局 优点:可以节约成本,不用再做专门的web app网站(外包公司.小公司.博客): 缺点:工作量大.维护很难:国内大型企业在移动端很少用. 3.固定宽度     案例:荔枝FM 640 优点:与设备做等比例的缩放: 缺点:在大屏幕手机下两边留白,操作按钮小. 4.目前主流做法rem    案例:淘宝移动端 rem:font size of root

探讨移动端布局适配方案

一.前提知识 移动端的屏幕尺寸有多种,其中要知道几个知识 物理像素:即设计稿的尺寸 逻辑像素:实体机器的真正像素 下面是我们经常适配的屏幕尺寸 一.rem布局 rem是以根元素字体大小作为参照的布局方式 如下 //以750px设计稿为例,物理像素是375px.设置div宽度为整个容器宽度一半 html{font-size:12px} div{width:375/2/12 rem} 屏幕的尺寸是不同的,为了保证布局大小一致,我们需要做判断屏幕的宽度,如下例子: rem布局的缺点是要根据不同的屏幕大

移动端屏幕适配方案

本文来源:http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=201811994&idx=1&sn=1c3bae60e2fe13d3bc3aeecaa6a4ef00&scene=23&srcid=abqLbfgvESx4DGNysdG8#rd pc上的网站在移动端上怎么办? 1:如果把移动端的可视区域(320-768)的话,大部分网站都会因为太窄而显示错乱: 2:所以浏览器默认把viewport设置为一个较宽的值

移动端前端适配方案20170707

1.Meida Queries meida queries 的方式可以说是我早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置.核心语法是: @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ /*你的css代码*/ } 优点 media query可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候.目前像Bootstrap等框架使用这种方

移动端适配方案

Flexible适配方案 最早的文章,是15年阿里手淘团队的移动端适配方案. 设计师常选择iPhone6作为基准设计尺寸,交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变). 前端开发人员通过一套适配规则自动适配到其他的尺寸. 先了解一些基本概念 视窗viewport 简单理解,viewport是严格等于浏览器的窗口,在桌面浏览器中,viewport就是浏览器窗口的宽度高度. 但是在移动端的viewport太窄,为了能更好的为css布局服务,所以提供了两个vie

移动端适配方案研究

初次接触移动端的时候,以为终于可以不用像pc那样考虑令人头疼的ie浏览器兼容问题,有强大的css3的帮助,可以随心所欲..可是后来才发现原来移动端各种层次不齐的终端更会让人抓耳挠腮,同样的页面在不同的手机上显示的完全不一样的效果,于是抛开功能,页面适配性也成了一个大的课题. 说到移动端,下面这一行代码大家一定不陌生: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s