用transform和rem哪个好

个人觉得电脑端的用transform好,毕竟电脑端的项目基本都会固定屏幕比列,16:9.28:9.32:9的一个固定的设计稿就能很好的适配. 移动端用rem比较好,移动端的屏幕比列太杂,使用rem自适应更好以上是个人看法…

1. Safari 3D变换会忽略z-index的层级在Safari浏览器下(此Safari浏览器包括iOS的Safari,iPhone上的微信浏览器,以及Mac OS X系统的Safari浏览器),当我们使用3D transform变换的时候,如果祖先元素没有overflow:hidden/scroll/auto等限制,则会直接忽略自身和其他元素的z-index层叠顺序设置,而直接使用真实世界的3D视角进行渲染. 例如下面的场景,图中红框里面的模块,使用 3D transform变换,进行旋…

[移动端]rem适配

原理:给html根节点设置一个基础font-size值,然后页面的所有元素布局均相对于该font-size值采用rem单位设定.font-size的取值通过js计算. 但字体不用rem单位,原因如下: 1.设计师要求:任何手机屏幕上字体大小都要统一 2.显然,我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号是相同的.也就是说,我们不希望文本在Retina屏幕下变小,另外,我们希望在大屏手机上看到更多文本,以及,现在绝大多数的字体文件都自带一些点阵尺寸,通常是16px…

webapp，liveapp：流式布局和rem布局

liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿就是按照640px来做布局方式: 流式布局,百分比布局和rem. 目前我用过的主要是这rem和流式布局流式布局: 网页的主要架构部分按照百分比布局,宽度百分比,高度定死: 如果是图片宽度设置百分比,高度根据图片的比例自适应,如果是封面图片可以高度定死,用background-size:cover…

webapp新体验Rem实现移动端网页适配详解资源

本来想写一篇,webapp使用Rem的问题,查了一下相关rem的介绍之后,发现很多平台已经解释的很清楚了,图文并茂,于是我便想将其解释资源整理一些,方便以后自己查阅. 腾讯ISUX:web app变革之rem(解释的最精辟了) 大漠博客:CSS3的REM设置字体大小小黑成长录:关于webapp中的文字单位的一些捣腾前端观察站:px em rem在WEB前端开发中的区别这里面需要注意的一点就是,ren是根据根元素的字体大小来确定的: 我们可能经常设置html{font-size:20px}或…

zoom和transform:scale()的区别

zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来)做出页面后,再对页面进行缩放以兼容其他屏幕宽度. 定义 zoom和transform:scale()具体有什么区别呢?先来看看官方的定义: Specifies the initial zoom factor for the window or viewing area. This is a mag…

使用rem设计移动端自适应页面一（转载）

1.困扰多时的问题在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 1136标准,所以高度一般取个大概值,各种图标的宽高也是取平衡值写死,然后部分样式通过媒体查询来设置,例如背景图的多倍图.基础字体大小.图标宽高. 这样做的弊端很明显: 做出来的页面在各种手机端看起来的物理大小(高度)是一样的,所以在大屏手机会觉得页面稍小,小屏手机页面稍大如果要使高度能更好的适应各种…

rem测试用实现移动端自适应页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

transform 属性小解

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

背景: 开发移动端H5页面一套设计图不同尺寸的手机不同分辨率的手机方案:使用rem作为单位解决一套设计图适应不同分辨率,不同尺寸的手机. 概念: REM(font size of the root element). 相对于<html>的font-size的计算方式. dpr(device pixel ratio).设备像素比:i5,6 = 2;i6plus=3; <meta content="width=device-width; initial-scale=1.0;…

移动端布局最佳实践（viewport+rem）

通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图但是这个可能不会太精准,比如我的设备布局viewport可能是370px,这样只能使用320这一版本.而事实上,他们的viewport并不相同,所以他们的布局也得不一样.也就是说我们如果用css媒体查询只能说是可以用,但不是最佳实践.其实通过看某些牛逼的移动端网站,可以看到他们的共同点,他们都是使用…

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

背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:…

transform旋转，平移，缩放，扭曲斜切

transform 改变rotate 旋转translate 位移scale 缩放 skew 斜切变形记得兼容性:-webkit- -moz- -ms- -o- transform: rotate(Xdeg,Ydeg);deg 表示角度 X轴正半轴为0deg,顺时针旋转值越来越大.transform-origin( X ,Y ); 设置对象旋转的中心点,如果没设置该值,默认transform-origin(50%,50%); transform-origin(100px…

移动端最强适配（rem适配之px2rem）&& 移动端结合Vuex实现简单loading加载效果

一.rem之px2rem适配前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 viewport --> 百分比 --> rem --> rem的升级版px2rem可谓是一把鼻涕一把泪啊 ,在px2rem之前总觉得之前的不够完美或者麻烦: 进入正题: 首先 px2rem 也是基于 rem 适配的,但是他的好用之处在于灵活.简便.高效不用我们自己去换算.px2rem-load…

深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局

1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em是指字体高度浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除…

细说移动端经典的REM布局与新秀VW布局

和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局实现单边边框1px 实现多边边框1px 实现边框圆角实现容器固定纵横比 5. REM + VW布局 6. 对比选择方案选择食用方式一.前言说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等. 而另一方面,还有一些布局概念: 1. 静态布局直…

移动端rem单位适配使用

1.适配方法 //缩放比例!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;var t=a.createElement("meta");if(t.setAttribute("name","viewport"),t.setAttribute("content","initial-scale="+s+", maximum-s…

REM+SVG Sprite，web app案例

REM+SVG Sprite,构建新时代web app <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewpo…

HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">…

vw+vh+rem响应式布局

科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位.相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度.视口被均分为100单位的vw; vh:相对于视口的高度.视口被均分为100单位的vh; vmax:相对于视口的宽度或高度中较大的那个.其中最大的那个被均分为100单位的vmax; vmin:相对于视口的宽度或高度中较小的那个.其中最小的那个被均分为100单位的vmin; ch:数字0的宽度; 2.角度单位(transform用到的比较多…

小心transform

张老师总结的,感谢! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .test1-wrap,.test2-wrap{ border: 1px dashed #000; margin-bottom: 20px; } /* 解决办法一 */ .t…

用rem适配移动端

常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种布局一般都是宽度自适应高度写死,显的很不协调,另外对设计也有很大的限制,另外还有兼容性方面的问题. 3. 响应式布局:说白了就是利用CSS3中的Media Query(媒介查询),喊的很火,谁用谁知道,简直累死人不要命. 4. 设置viewport进行缩放:以320宽度为基准,进行缩放,最大缩放为3…

vue2.0 flexible.js + rem 进行自适应开发

1.在页面中引入flexible.js base.js /** * flexible.js 阿里前端自适应解决方案 */ ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name=&…

轻松pick移动开发第二篇，rem布局

一.为什么要使用rem布局前面我写了flex布局的优点,分配伸缩盒容器中子盒子占的份数及排列方式,使其不受屏幕缩放的影响,使布局变得简单.然而,在有些时候,不可避免要给盒子设置高度的值,怎么让高度也随着屏幕大小变化等比例缩放呢?另外,怎么让页面文字大小也随着屏幕的大小变化而缩放呢?rem布局就可以轻松解决这个问题. 二.rem布局的原理 1.rem 首先要了解什么是rem,rem (root em)是一个相对单位,1rem的值是页面html中font-size的大小.在布局中,我们统一使用re…

rem适配移动端

一.屏幕宽度 / 设计稿宽度 *100 来设置根元素的 font-size 10px = 0.10rem (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if…

Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询

实际开发搞搞起来!!!! rem适配方案媒体查询+rem+less 基础知识铺垫第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值页面rem = 页面元素值(设计稿) / (屏幕的宽度/划分的份数) (屏幕的宽度/划分的份数) = html大小这个算法你也不需要太纠结,按照这个来就是最后终结一下: 首先我们选一套标准尺寸 750为准我们用屏幕尺寸除以我们划分的份数得到了 html 里面的文字大小但是我们知道不同屏幕下得到…

对于页面适配，你应该使用px还是rem

css中的单位很多,%.px.em.rem,以及比较新的vw.vh等.每个单位都有特定的用途,比如当需要设置一个矩形的宽高比为16:9,并且随屏幕宽度自适应时,除了用%,其他单位是很难做到的.所以不存在说某个单位是错误的,某个单位是最好的这种说法. 那本文说的页面适配,指的是同样的布局,在不同大小的屏幕上怎么进行缩放.控制间距.宽高.字号等大小. 页面适配的方式有很多: 使用px,结合Media Query进行阶梯式的适配: 使用%,按百分比自适应布局: 使用rem,结合html元素的font-…

仿苏宁移动web页面自适应 rem&less

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scal…

这次我好像才真的明白了CSS Rem字体计算的原理

背景如何按照设计稿中标注的尺寸,直接写页面的样式,不再需要px2rem这样的工具或者人工转换 ? 只要你明白了rem的计算原理,这个问题的答案超级简单. 根字体大小计算核心原理设备的根字体大小 * 全屏比例值 = 设备的宽度设计稿的根字体大小 * 全屏比例值 = 设计稿的宽度这两个等式中的全屏比例值相等的条件下,在真实设备上可以高保真地还原设计稿. 实战一下找了一个蓝湖的设计稿,蓝湖的设计稿宽度是750px,默认根字体大小是50px. 50px * 全屏比例值 = 750px,这个全…

以rem为单位，数值较小，border-radius：50%部分浏览器渲染不圆方法

元素使用rem做单位且较小时,对于border-radius:50%在部分浏览器不圆解决方法: 1.将原来宽高扩大至两倍(.1rem --> .2rem),再使用transform:scale(.5);transform-origin: 0% 50%进行缩放. 2.将元素rem单位换位px为单位. /*方法1*/ .ellipsisDot { display: inline-block; width: .2rem; height: .2rem; background: #C6C6C6; -moz…