正文 

当前位置： 首页 > java > java教程

移动端高清多屏适配方案——rem

author author     2022-08-03     691

关键词：

背景：

  1. 开发移动端H5页面
  2. 一套设计图
  3. 不同尺寸的手机
  4. 不同分辨率的手机

方案：使用rem作为单位解决一套设计图适应不同分辨率，不同尺寸的手机。

概念：

  1. REM(font size of the root element). 相对于<html>的font-size的计算方式。
  2. dpr(device pixel ratio).设备像素比；i5,6 = 2;i6plus=3;
  3. <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
  4. ve,vh:Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小.vw单位巧妙实现滚动条出现页面不跳动

思路：a,相同的rem,只需要更改页面根元素的font-size;

  1. 通过媒体查询根据屏幕区间，更改html的font-size.把与元素尺寸有关的css,如width,height,line-height,margin,padding等都以rem作为单位,这样页面在不同设备下就能保持一致的网页布局。;
    1. 布局　　 
      @media screen and (max-width: 320px) {
   html{font-size: 14px;}
}
@media screen and (min-width: 321px) and (max-width: 413px) {
    html{font-size: 16px;}
}
@media screen and (min-width: 414px) and (max-width: 639px) {
    html{font-size: 17px;}
}
@media screen and (min-width: 640px) {
    html{font-size: 18px;}
}
  2. 通过js库,动态更改html的font-size;(lib-dlexiable)；

常见问题：

  1. retina屏幕需要高清图片，然而普通屏幕加载高清图片却浪费资源耗带宽，因此根据不同手机dpr加载不同的图片可以解决这问题。
    @mixin img-dpr(){
    background-image: url(image.jpg);//默认
      [data-dpr="2"] & {
        background-image: url([email protected]);//两倍高清
      }
      [data-dpr="3"] & {
        background-image: url([email protected]);//三倍高清
      }
}
.content{
    @include img-dpr(); 
}
  2. border:1px，字体会随着屏幕自由变化
    @mixin font-dpr($font-size){
      font-size: $font-size;
      [data-dpr="2"] & {
        font-size: $font-size * 2;
      }
      [data-dpr="3"] & {
        font-size: $font-size * 3;
      }
}
.content{
    @include font-dpr(12px);    
}
  3. 雪碧图错位问题：a,先放大100倍，提高图片精度，找到图片位置，再缩小100倍;b,最好是使用字体图标;c,单个背景
    .icon-fix {
    background: none;
    position: relative;
    overflow: hidden;
}

.icon-fix:after {
    content: ‘‘;
    display: block;
    width: 10000%;
    height: 10000%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(sprite.png);
    background-repeat: no-repeat;
    background-size: 140rem;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(.01);
    transform-origin: 0 0;
    transform: scale(.01);
}

.icon3:after {
    background-position: 0 -280rem;
}
  4. 设计稿px转成rem:640的设计稿$base:40;750的设计稿$base:75. 
    @function pxToRem($px, $base: 40) {
      @return ($px / $base) * 1rem;
    }
    #demo{with:pxToRem(30)}
  5. flexible使用文档说明：详情文档查考：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
    1. <head>中添加对应的flexible_css.js和flexible.js文件。一定是要在head中先引入。
    2. 执行这个JS后，会在<html>元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px；
    3. 在js中设置栅格数
      1. function refreshRem(){
            var width = docEl.getBoundingClientRect().width;
            if (width / dpr > 540) {//目前主流手机最大的css像素尺寸，是540（比如devicePixelRatio为2，分辨率是1080x1920的手机），所以用了这个经验值。这样可以让在ipad横屏这种情况下浏览无线页面，不至于因为拉伸适配后体验太差。
                width = 540 * dpr;
            }        
            var rem = width / 16;
            docEl.style.fontSize = rem + ‘px‘;
            flexible.rem = win.rem = rem;
        }
    4. 页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果
    5. 其中initial-dpr会把dpr强制设置为给定的值。如果手动设置了dpr之后，不管设备是多少的dpr，都会强制认为其dpr是你设置的值。Android系列，始终认为其dpr为1。
    6. 事实上他做了这几样事情：
      • 动态改写<meta>标签
      • 给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
      • 给<html>元素添加font-size属性，并且动态改写font-size的值

讨论：

  1. 字体需不需设置成px？
  2. 原先设计图是640的，新设计图是750的。如何兼容之前的版本？
  3. 能不能在refeshRem中的540适当的放大，从而支持pad样式？
  4. rem兼容哪些坑？

H5适配终端数据

技术分享

 

 

参考文档：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

 

原创移动端高清多屏适配方案

 移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉... 查看详情

移动端高清多屏适配方案

背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：1... 查看详情

移动端高清多屏适配方案

背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：... 查看详情

解惑好文：移动端h5页面高清多屏适配方案(转)

转自：http://mobile.51cto.com/web-484304.htmhttps://github.com/amfe/lib-flexible/blob/master/src/makegrid.jshttps://segmentfault.com/a/1190000006839117对于retina屏幕(如:dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点 查看详情

移动端高清屏适配方案

结论：用户体验要求很高的页面，如UV较高的页面，活动页这些应该以用户体验优先，应用flexiable方案在其它页面，固定视口，不缩放，使用rem做布局适配，js添加屏幕标识以便调整字体大小（即布局使用rem，字体使用百分比）... 查看详情

移动端适配方案以及rem和px之间的转换

背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：1... 查看详情

移动端高清适配布局开发解决方案

前言：移动端的适配是个大问题，特别是安卓，国内版本众多，不规则的dpr数不胜数，为了适配各种移动终端，网易、百度、阿里各大厂都有自己的适配解决方案。要解决哪些问题呢？不同设备下的统一视觉体验。不需要手动设... 查看详情

08-移动端开发教程-移动端适配方案

由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。1.常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置... 查看详情

rem,vw,还是...?各凭本事的移动端适配方案(代码片段)

...假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页... 查看详情

移动端适配方案-rem(基础篇)

　　　　常见移动web适配方案一般有3种方法，如下图：　　　　　　①：定高，宽度百分比（百分比适配简单，一般用来做一些适配性不高的页面，比如只有一些文字和图片等简单的屏幕适配）　　　　②：flex（更多的用于复... 查看详情

html移动端适配方案rem

为了做到一次开发的网页能够在不同尺寸的移动端设备上适配，我们需要使设计稿上标注的固定尺寸在不同设备上按照设备大小的比例显示不同的尺寸。比如设计稿是按照 IPhone6 的 750px 像素设计的，设计稿上的头... 查看详情

基于rem的移动端响应式适配方案(详解)移动端h5页面的设计稿尺寸大小规范

基于rem的移动端响应式适配方案(详解)：　　https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范　　http://www.tuyiyi.com/v/53039.html 查看详情

rem移动端适配方案(代码片段)

 一、remvsem　　单位定义特点remfontsizeoftherootelement以根元素字体大小为基准emfontsizeoftheelement以父元素字体大小为基准  二、js计算为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我... 查看详情

移动端适配js

移动端适配方案非常多，入行两年来始终没有一直使用一个标准，每个项目都按照业务需求来做适配方案一：最初听李彦辉老师的课程使用rem布局了一段时间，但是字体计算比较麻烦，也不太精确方案二：偶然在Q群里一群友分... 查看详情

移动端适配方案(代码片段)

首先，我们需要知道rem和em的基本概念。rem:相对于html根元素的fontsize。em:相对于当前元素的字体大小。rem和em都能够根据屏幕大小做适配。 一、假设现在给出我们一张750px的设计图，我们在设计图上量出200px*200px的div大小，并... 查看详情

还在用rem做移动端适配？最新移动端适配方案vw,vh了解一下！(代码片段)

vw,vh都是相对于屏幕视口的单位。vw:相对于视口的宽度。视口被均分为100单位的vw；vh:相对于视口的高度。视口被均分为100单位的vh；vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax；vmin:相对于... 查看详情

移动端适配的问题

1.如何适配？想要在移动端的不同尺寸设备间做适配，使得页面布局可以等比例缩放。于是我立刻想到了百分比布局和rem布局。百分比布局无法适配性定高，只能用px定死，显然这是无法接受的。rem布局不是响应式布局方案，它... 查看详情

移动端屏幕适配解决方案

　　因原在做移动端适配过程中，一直都是应用淘宝的flexible高清方案解决，也没有认真的去研究过源码。这几天又看到一些普通的适配方案，于是把两者源码放在一起比较，发现高清方案是通过动态的获取了当前设备的dpr值，... 查看详情