target-densitydpi=device-dpi会使其他ui插件布局变小

东哥说：不用rem了，把meta改成这样<meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">就可以直接上px...

这句target-densitydpi=device-dpi是什么意思呢？

target-densitydpi这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素

target-densitydpi值可以为一个数值或 high-dpi、medium-dpi、low-dpi、 device-dpi这几个字符串中的一个

当target-densitydpi=device-dpi时， css中的1px会等于物理像素中的1px。

好像已经决定要废弃target-densitydpi 这个属性了，尽量避免使用这个属性。

当你不在项目中用一些UI插件的时候，它显示的没问题，的确没有使用rem的必要。

大部分手机端UI插件都是根据手机屏幕来展示它的大小，这时候，坑就出现了。

举个栗子~

iphone6屏幕大小是375*667，当使用了target-densitydpi=device-dpi,而width=720时，也就是说当UI插件自认为是用了满宽度(375)，实际上显示的是屏幕的（375/720）≈ 52%。

px转rem片段

笔者当时的解决方案是，把px转回rem，但是那么多的css，每个px都手动转，想想头都大。

然后，第一时间，想到用正则表达式啊。

直接上代码

var pxCode = ""; // 一堆px单位的css代码

var remCode = cssCode.replace(/([0-9]*?\.)?[0-9]+px/g,function(res){

			return (res.split('px')[0]/100) + 'rem'

		}); // 一堆rem单位的css代码

px转rem小工具

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title></title>

</head>

<style type="text/css">

*{ margin: 0; padding: 0; }

html,body{ width: 100%; height: 100%; }

.left{ float: left; }

.right{ float: right; }

.item{ width: 48%; height: 90%; border: none; position: relative; top: 5%; left: 0; }

.item textarea{ width: 100%; height: 100%; outline: none; resize: none; }

</style>

<body>

<div class="item left">

	<textarea id="px"></textarea>

</div>

<div class="item right">

	<textarea id="rem"></textarea>

</div>

</body>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

	$('#px').keyup(function() {

		var px = $(this).val();

		var rem = px.replace(/([0-9]*?\.)?[0-9]+px/g,function(res){

			return (res.split('px')[0]/100)+'rem'

		})

		$('#rem').val(rem);

	})

</script>

</html>

target-densitydpi=device-dpi会使其他ui插件布局变小的更多相关文章

  1. vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题

    公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...

  2. keil编译STM32工程时 #error directive: "Please select first the target STM32F10x device used in your application (in stm32f10x.h file)"

    我们可以双击错误,然后会自动定位到文件 stm32f10x.h 中出错的地方,可以看到代码: #if !defined (STM32F10X_LD) && !defined (STM3 ...

  3. stm32的hall库新建模板编译错误： #error "Please select first the target STM32F1xx device used in your application (in stm32f1xx.h file)"的处理

    在stm32f1xx.h file文件中找到如下代码: /* Uncomment the line below according to the target STM32L device used i ...

  4. 【UI插件】简单的日历插件（下）—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  5. Struts2 easy UI插件

    一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...

  6. WPF界面设计技巧（9）—使用UI自动化布局

    原文:WPF界面设计技巧(9)-使用UI自动化布局 最近一直没时间更新这系列文章,因为我一直在埋头编写我的第一个WPF应用程序:MailMail 今天开始编写附属的加密/解密工具,对UI自动化布局有些 ...

  7. UWP学习记录2-设计和UI之布局

    UWP学习记录2-设计和UI之布局 1.导航基础知识 应用里,多个页面会有层次关系或者对等关系.这两种关系,通常在一个复杂应用里都会存在,而关系的选定依据: 对于对等导航,一般用选项卡(tabs)或者 ...

  8. Arduino下LCD1602综合探究（上）——1602的两种驱动方式，如何使LCD的控制编程变得更简单

    一.前言: LCD ( Liquid Crystal Display 的简称)液晶显示器,已经逐渐替代CRT成为主流的显示设备之一,因此也成为了单片机发烧友绕不过的话题之一:而LCD1602更是很多单 ...

  9. 【UI插件】开发一个简单日历插件（上）

    前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...

随机推荐

  1. 深度学习之 cnn 进行 CIFAR10 分类

    深度学习之 cnn 进行 CIFAR10 分类 import torchvision as tv import torchvision.transforms as transforms from to ...

  2. SpringBoot应用的启动方式

    一:IDE 运行Application这个类的main方法 二:在SpringBoot的应用的根目录下运行mvn spring-boot:run 三:使用mvn install 生成jar后运行 先到 ...

  3. SQL查询语句练习

    最近在学习SQL嘛,所以各个地方找题目来练手,毕竟现在能离得开数据库么? Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C ...

  4. DevExpress控件的一些快捷操作

    用的DevExpress控件时,有一些操作并不太方便,根据我自己需要的封装了一些控件的事件,调用的时候直接绑定控件的事件就可以了 例如: this.ComboBoxEdit.KeyDown += Ct ...

  5. LayUI之table数据表格获取行、行高亮等相关操作

    前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...

  6. Linux系统的基本使用

    曾经在网上看到一个一篇文章,说到了Linux学习的入门与学习技巧,也就是:初学者可以自己安装虚拟机,然后把linux常用命令例如cd.ls.chmod.useradd.vi等等多练习几十遍,把自己敲打 ...

  7. POJ-3253 Fence Repair---Huffman贪心

    题目链接: https://vjudge.net/problem/POJ-3253 题目大意: 有一个农夫要把一个木板钜成几块给定长度的小木板,每次锯都要收取一定费用,这个费用就是当前锯的这个木版的长 ...

  8. scrapy spider官方文档

    Spiders Spider类定义了如何爬取某个(或某些)网站.包括了爬取的动作(例如:是否跟进链接)以及如何从网页的内容中提取结构化数据(爬取item). 换句话说,Spider就是您定义爬取的动作 ...

  9. Redis、Memcache与MongoDB的区别

    >>Memcached Memcached的优点:Memcached可以利用多核优势,单实例吞吐量极高,可以达到几十万QPS(取决于key.value的字节大小以及服务器硬件性能,日常环境 ...

  10. 去除Eclipse中js报错的问题

    第一步:    去除eclipse的JS验证:        将windows->preference->Java Script->Validator->Errors/Warn ...