rem

rem布局实现不同分辨率移动终端的自适应、整体缩放

时光总嘲笑我的痴心妄想 提交于 2019-12-07 23:28:47
前言 现在手机屏幕分辨率越来越多,但我们的需求比较唯一——最佳视觉。 当用户浏览网页时,根据屏幕的尺寸,来向用户展示更适合用户的布局、文字、图片、按钮等等,因此,rem应运而生。 rem(font size of the root element)是指相对于根元素的字体大小的单位。一旦根节点html 定义的 font-size 变化,那么整个网页中运用到 rem的也会随之变化。加之当前手机淘汰速度较快,当前主流的手机内嵌浏览器内核版本均可以支持rem布局。 开撸 一般移动端的UI设计稿会采用iphone6宽度像素的尺寸作为标准——750,具体理由自行百度下,这里不再过多赘述。竖向一般不用考虑,基本是流布局,非限定一屏高度的话无影响。 本文以750设计稿为例。 第一步:设置初始rem css file: html { font-size : calc( 100 vw/ 7.5 ) ; } 说明: 100vw是设备的宽度,除以7.5可以让1rem的大小在iPhone6下等于100px。 第二部 全局px替换为rem 替换设计稿中的px为rem,注意rem=px/100,即font-size: 12px,需要写成font-size: .12rem,其他宽度、高度、间距等同理。由于rem是相对于根节点元素大小的单位,遂当设备宽度改变时,采用rem布局的大小均会跟随相同比例变化

rem

可紊 提交于 2019-12-06 14:16:06
1 目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。 就算对不支持的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。 使用%单位方便使用 css中的body中先全局声明font-size=62.5%,这里的%的算法和rem一样。 因为100%=16px,1px=6.25%,所以10px=62.5%, 这是的1rem=10px,所以12px=1.2rem。px与rem的转换通过10就可以得来,很方便了吧! 使用方法 注意,rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可; /*16px * 312.5% = 50px;*/ html{font-size: 312.5%;} /*50px * 0.5 = 25px;*/ body{ font-size: 0.5rem; font-size\0:25px; } @media only screen and (min-width: 320px){ html { font-size: 62.5% !important; } } @media only screen and (min-width: 640px){ html { font-size: 125%

vue中自动将px转换成rem

大兔子大兔子 提交于 2019-12-06 10:28:21
1.首先下载 lib-flexible npm install lib-flexible --save 2.在main.js中引用 lib-flexible 3.安装px2rem-loader(将px转换成rem) npm install px2rem-loader 4.配置px2rem 在build/utils.js中配置px2rem 我这边是根据 iphone6的设计图尺寸来的,所以用37.5能方便把设计图上的px直接写在代码里面。 最后重新 npm run dev 就可以使用了   来源: https://www.cnblogs.com/xiuxiume/p/11978030.html

【干货】前端rem单位的正确使用姿势

泪湿孤枕 提交于 2019-12-06 07:58:59
简单阐述下px、em、rem之前的关系(其实网上很多,我这里稍微提一下)。 先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。 em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。 rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视(始终想不明白,为什么国人至今对微软都放弃的ie这么恋恋不舍)。 以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。 下面来说说怎么更方便的使用rem和自己开文处提到的坑! 之前遇到的坑是这样的。浏览器默认的字体大小都是16px(注意这里),所以要使1rem=10px

你必须要知道的移动端开发知识

♀尐吖头ヾ 提交于 2019-12-06 07:51:13
移动开发不同与PC端开发,可能会经历各种意想不到的问题,尤其是移动端应用刚起步的几年;随着移动互联网的快速发展,有些问题已经得到了很好的支持,如1像素边界的问题。当然,要更好地解决这些移动端的问题,就需有移动端领域相关的知识,下面就来说说。 dpr设备像素比 首先说一下,这个dpr不仅仅是移动端才有的,pc端也有,但是对一些移动端的问题产生的原因及解决显得比较重要,比如1像素的问题。先来看几个概念: 物理像素(physical pixel) 一个物理像素就是显示设备上最小的物理显示单元,每个物理像素都有自己的颜色值和亮度值。例如iphone6手机屏幕有750*1334个物理像素 设备独立像素(density-independent 设备独立像素又叫密度无关像素,也可以叫逻辑像素,程序使用的虚拟像素如css像素,可以理解为显示设备坐标系统中的一个点; 设备像素比dpr(device pixel ratio) 设备像素比,简称dpr,定义了物理像素与设备独立像素之间的对应关系,具体的对应关系是一个计算公式如下: dpr = 物理像素 / 设备独立像素 上面计算的dpr是指某一个方向上如x或者y方向,二者dpr值相同;程序中获取dpr方式如下: js获取dpr使用 window.devicePixelRatio css获取dpr使用 -webkit-device-pixel-radio

HDOJ-1100 Trees made to order

会有一股神秘感。 提交于 2019-12-06 04:56:17
一、题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1100 二、题目分析 对二叉树的所有形态顺序编号,编号规则是:节点数越多的编号越大;节点数相等,左子树节点数越多的越大;节点数相等,左子树节点数也相等,则依此规则比较右子树。 现给定一个正整数,依题目要求输出对应编号的二叉树形态。 三、求解思路 由题目输出格式要求,很直观地联想到使用深度优先搜索dfs,以当前二叉树对应的编号为条件,依次递归输出左子树和右子树。 1 int main(void) { 2 int n; 3 unsigned int arr[20] = {0}; 4 5 init(arr, 20); 6 7 while (scanf("%d", &n) != EOF && n != 0) { 8 dfs(n, arr, 20); 9 printf("\n"); 10 } 11 12 return 0; 13 } 其中arr存储的是不同节点数对应的二叉树形态数,即arr[i]表示有i个节点的二叉树总共有多少种形态。 1 void dfs(int n, unsigned int *arr, int num) { 2 3 int left, right; 4 5 if (n == 1) { 6 printf("X"); 7 return ; 8 } 9 10

我对移动端适配的了解

孤街醉人 提交于 2019-12-06 04:43:14
不知不觉做前端已经两年了,从PC端,移动端,微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件),对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的,这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间,到了移动端,面对webkit内核的Safari与Chrome会舒心很多。but,我们要对于市面上的手机各式各样的分辨率进行适配,刚接触移动端开发的时候是不是有点猝不及防哈哈,尤其是去年年中以前老版本的微信内置浏览器用的X5内核,给网友们戏称移动端IE... 今天的主题是讲的是我对移动端多终端适配的解决方案和移动端适配的有关布局的知识总结,下面正式开始。 基本概念和原理 首先要了解的重要的基础知识点:物理像素,设备独立像素,设备像素比,css像素,布局视口,可视视口,理想视口以及css单位rem。 物理像素(设备像素) 屏幕的物理像素,又被称为设备像素。任何设备屏幕的物理像素出厂时就确定了,是固定不变的。 设备独立像素 设备独立像素也可以理解为CSS像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。 设备像素比 设备像素比简称为dpr

SRDC - ORA-22924 or ORA-1555 on LOB data: Checklist of Evidence to Supply (Doc ID 1682707.1)

青春壹個敷衍的年華 提交于 2019-12-06 04:38:33
SRDC - ORA-22924 or ORA-1555 on LOB data: Checklist of Evidence to Supply (Doc ID 1682707.1) Action Plan 1. Check for LOB Corruption using srdc_corrupt_LOB.sql script. Collect the spool output. 脚本检查LOB损坏 --srdc_corrupt_LOB.sql REM srdc_corrupt_LOB.sql REM To identify corrupted row(s) in a LOB segment define SRDCNAME='DB_Corrupt_LOB' set pagesize 200 verify off term off entmap off echo off set markup html on spool on COLUMN SRDCSPOOLNAME NOPRINT NEW_VALUE SRDCSPOOLNAME select 'SRDC_'||upper('&&SRDCNAME')||'_'||upper(instance_name)||'_'|| to_char(sysdate,'YYYYMMDD_HH24MISS') SRDCSPOOLNAME from v

在sublime中px转rem

拟墨画扇 提交于 2019-12-05 19:27:39
插件叫这个:CSSREM 不建议直接在package install那里安装,一直报错,找不到本地文件 安装 下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录:Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。 配置参数 参数配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例,默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为:[".css", ".less", ".sass"]。 有个折磨点!!! 自己的文件类型最好还是 [".css", ".less", ".sass"] 我尝试去转换.scss,无效。 也在配置文件里新增了 ".scss",然后再对.scss文件尝试进行转换,还是无效 后来把我的.scss 改为 .sass就好了 来源: https://www.cnblogs.com

rem布局

风流意气都作罢 提交于 2019-12-05 17:30:59
rem布局 技术选型 方案:采取单独制作移动页面方案 技术:布局采取rem适配布局(less-rem+媒体查询) 设计图纸:750px尺寸 相关文件夹结构 设置视口标签以及引入初始化央视 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximun-scale=1.0,minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/normalize.css"> 设置公共的common.less文件 设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小,因为除了首页其他页面也需要 常用尺寸:320px\360px\375px\384px\400px\414px\424px\480px\540px\720px\750px 划分的分数我们定位15等分 html字体大小为50px,写在最上面 方案1 less 媒体查询 rem 方案2 flexible.js 手机淘宝团队出的简洁高效的移动端适配库 不在需要些不同屏幕的媒体查询 原理是把当前设备划分为10等分,但是不同设备下,比例还是一致的 我们要做的