案例单击我

上一篇文章我写了，关于移动端适配问题，传送门开，这一次也关于移动端适配问题，这个方式比较常用。我经常在公司得项目中使用

直接粘贴适配代码：

/** @Author: a* @Date:   2017-03-11 15:08:34* @Last Modified by:   a* @Last Modified time: 2017-03-11 15:08:59*/'use strict';
(function(doc, win) {var docEl = doc.documentElement, // 获取html对象resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', // 横屏是否支持，不支持则为浏览器大小改变// 计算页面字体大小recalc = function() {// 获取页面宽度var clientWidth = docEl.clientWidth;// 获取不到页面宽度，直接返回if (!clientWidth) return;// 设置html字体大小(浏览器默认字体大小为16px)docEl.style.fontSize = clientWidth / 375 * 16 + "px";};// 不支持addEventListener,返回if (!doc.addEventListener) return;// 监听事件，获取当前html标签的字体大小win.addEventListener(resizeEvt, recalc, false);// dom内容加在完成事件doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

看看上面得代码和我上一次粘贴的代码是不是很少了，所以推荐上面得使用。

使用方式

这里本人设计图是750 得，那么我设置得基础屏幕375得适配。转换：32px 等于 1rem 这就是公式，那么我设计图120px得转换rem为3.75rem即可,计算为：120/32=3.75rem

注意

手机上面是不能看到1px转换后得rem大小，那么怎么办了？有关解决与设计图设计一样，开启传送门
记住加上meta缩放显示那些东西

   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

设计师设计一个750的图就可以了，不用设计多个分辨率的，咱们前端使用这个给他适配即可
优化css和图片（这个一点我很难做到，老板觉得我们前端写个页面而已，简单，要速度即可，先给我10分钟，去把血给吐下）

【前端库】HTML 移动端适配（推荐）相关推荐

移动端适配推荐flexible和 postcss-px2rem
vue项目移动端.PC端适配方案 vue项目移动端.pc端适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-size postcss-px2rem 自动将px单位转换成re ...
前端面试之移动端适配篇(转载)
文章目录关于像素,括号中为别名设备像素(物理像素) 设备无关像素(设备独立像素) 设备无关像素与CSS像素之间的关系 -- 页面缩放比设备像素与设备无关像素之间的关系 -- DPR 设备像素与C ...
Html百分比设宽偏差大,前端开发之移动端适配详细讲解
适配问题怎么适配iphone6 1px问题为什么页面与设计稿会出现偏差? dpr=设备像素/ css像素,只有dpr等于1的时候,实际效果和设计稿的尺寸比例才是1:1. 因为iPhone6的DPR ...
html上的样式 ui vant_解决vue中组件库vant等ui组件库的移动端适配问题
1.首先把安装amfe-flexible,这里使用npm install npm i -S amfe-flexible 2.在入口文件main.js中引入 import 'amfe-flexible/ ...
layui移动端适配_web前端-移动端适配方案
三微授渔,授你以渔一般情况下吗,设计稿的设计师按照 375 的尺寸设计,在手机(移动端)快速更新迭代的今天,每个品牌的手机都有着不同的物理分辨率和逻辑分辨率,此时 375 的设计稿,如果想要还原那基 ...
7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐> React 移动端 UI 组件库 1. Taro UI for React - 京东出品,多端 ...
5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐> Vue 移动端 UI 组件库推荐 Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序 ...
【前端】页面适配？移动端适配屏幕的各种解决方案！
前言由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案. 1. 常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽 ...
前端适配：移动端/web端适配方案
科普: rem rem是CSS3新增的一个相对单位(root em,根em)这个单位与em有什么区别呢? 区别在于 1.使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. 2 ...

【前端库】HTML 移动端适配（推荐）

案例单击我

使用方式

注意

【前端库】HTML 移动端适配（推荐）相关推荐

最新文章

热门文章