• 关于

    @REM

    的搜索结果

问题

sass @mixin参数不能作为css属性名输出吗

这段代码本来是less写的 现在要混到scss里 所以我翻译了一下less代码如下:.px2rem(@name, @px){ @{name}: @px / 75 * 1rem; } body{ .px2rem(width,...
杨冬芳 2019-12-01 19:43:26 1365 浏览量 回答数 1

回答

移动端开发的页面建议是不要使用rem单位来设置字体的大小。因为通过rem方案计算出来的实际像素会有一定的偏差,而且存在小数;例如: iphone6 屏幕的宽为375,设置的缩放比为initial-scale = 1.0,计算出 rem 的基准值为 375/10 = 37.5px; 即 1rem = 37.5px。 iphone6 plus 屏幕的宽为414,设置的缩放比为initial-scale = 1.0,计算出 rem 的基注值为 414/10 = 41.4px; 即 1rem = 41.4px。 当你要设置一个 16px 的字体的时候,换算成rem的方案在 iphone6 下就是 16/37.5 = 0.426667rem;在 iphone6 plus 下就是 16/41.4 = 0.386473rem; 浏览器解析的时候会根据你设置的基准值和设置的rem大小换算成px来显示。 所以建议不要使用rem来作为单位设置字体的大小。直接使用px来设置;但是要考虑到响应式的问题,所以需要针对不同的屏幕设置字体的大小,建议是结合使用less 或者sass来采用以下方案: .px2px(@name, @px){ @{name}: round(@px / 2) * 1px; [data-dpr="2"] & { @{name}: @px * 1px; } // for mx3 [data-dpr="2.5"] & { @{name}: round(@px * 2.5 / 2) * 1px; } // for 小米note [data-dpr="2.75"] & { @{name}: round(@px * 2.75 / 2) * 1px; } [data-dpr="3"] & { @{name}: round(@px / 2 * 3) * 1px } // for 三星note4 [data-dpr="4"] & { @{name}: @px * 2px; } } .demo{ .px2px(font-size, 14); } 编译后输出 [data-dpr="2"] .demo{ font-size: 28px; } [data-dpr="2.5"] .demo{ font-size: 35px; } [data-dpr="2.75"] .demo{ font-size: 39px; } [data-dpr="3"] .demo{ font-size: 42px; } [data-dpr="4"] .demo{ font-size: 56px; } 有个不好的缺点,就是编译后会有比较多的代码。 如果觉得以上的说明还没解决你的问题可以看看 淘宝的移动端自适应方案 知识补充 http://div.io/topic/1092
杨冬芳 2019-12-02 02:39:05 0 浏览量 回答数 0

回答

15年初的时候就开始用类似方案,配合 SASS 写个函数,其中 $w 为设计稿的宽除以10。// rem 基准值,psd宽为750px$w: 75;@function rem($n) {@return ($n/$w) + rem;}为你的 SCSS 文件引入上面的函数后,你在写代码时就只要量取PSD中的真实像素,然后按以下方式书写即可。.header {width: rem(200); height: rem(400); margin-top: rem(-20);}如果以前使用的是媒体查询来设置根字体的font-size,可以参考我的另一个批量修改方法,工具是Sublime Text 3。
a123456678 2019-12-02 02:05:29 0 浏览量 回答数 0

回答

看一下你写的代码,虽然挂了-webkit-keyframes,但是里面的transform却没加-webkit@-webkit-keyframes arrow {0%{transform: translate(0,-.3rem);}100%{transform: translate(0,.3rem);}}刚才帮你测试了,加上-webkit动画效果没问题全选复制放进笔记@-webkit-keyframes arrow {0%{-webkit-transform: translate(0,-.3rem);}100%{-webkit-transform: translate(0,.3rem);}}如果还有问题,试着清理一下缓存
杨冬芳 2019-12-02 02:42:20 0 浏览量 回答数 0

回答

em相对父级元素来计算的。 如果html结构是:.box>.test,box字体大小为14px,test设置字体大小为2em,那么test字体大小为28px。 但是,这里响应式用的em,参考谁呢?测试下,使用火狐响应式开发工具。 html: lalala css:html{ font-size: 18px; } body{ font-size: 24px; } @media screen and (min-width: 20em){ body { height: 400px; height: 600px; color: orange; } }我以为参考的是body或者html的字体大小,但测试结果并非如此。而是默认的16px。。。也就是说,此处的min-width计算出来是20*16px。 比em更舒服的是rem,根元素html。通常根元素默认字体大小为16px,这样我们就不用管其他的继承影响了,只要针对根元素html的16px去计算即可。基于此,可以用sass函数来做。 $baseSize:16;@function px-to-rem($size){ @return $size*1rem/$baseSize;}调用: .box { font-size:px-to-rem(12); width:px-to-rem(220); }
a123456678 2019-12-02 02:23:34 0 浏览量 回答数 0

问题

flexible.js插件使用疑问?

如果是用flexible.js设置font-size的大小,那么在写元素大小的时候该怎么写,是按照font-size:64px去继承写rem,参照尺寸是哪个?还有我之前写手机端用的是媒体查询+css的方式,用sass定义了px转换成rem的...
a123456678 2019-12-01 20:15:44 1644 浏览量 回答数 1

问题

用@media设置html的font-size给rem用出现的问题?

我的设计稿是640px的,所以设置font-size:62.5%比较写值,但是屏幕缩小后的font-size比例我不知如何把控,不知这样写对不对?min-width: 580px和max-width:580px会不会冲突呢?@media o...
杨冬芳 2019-12-01 20:06:14 1698 浏览量 回答数 1

问题

css3动画 微信浏览器不支持

做了一个图标上下运动的小动画,手机浏览器ios里面都没问题,就是安卓的微信里面看动画就挂掉了 .renchou-box:after{ content: "";position: absolute;z-index: 5;bottom: 1.2...
杨冬芳 2019-12-01 19:52:04 1889 浏览量 回答数 1

回答

淘宝的M站是用rem的啊,字体淘宝用的是sans-serif,也就是用系统自带默认字体。大小的话,可以类似下面这样设置,其他样式就以html的样式为基本。@media only screen and (min-width: 320px){ html { font-size: 20px !important; } } @media only screen and (min-width: 640px){ html { font-size: 40px !important; } } @media only screen and (min-width: 750px){ html { font-size: 46.875px !important; } } @media only screen and (min-width: 1242px){ html { font-size: 77.625px !important; } }
a123456678 2019-12-02 02:25:32 0 浏览量 回答数 0

问题

如何移植批处理文件到linux服务器

现在有这样的需求,每天上午9点linux服务器自动将最近两天的数据导入到数据库,比如今天就是要动态读取20130723.txt,20130722.txt(昨天和今天)这两个文件,在windows服务器下已经实现了, 现在要求转移到linux...
杨冬芳 2019-12-01 20:20:11 839 浏览量 回答数 1

问题

用@media设置html的font-size给rem用出现的问题?

我的设计稿是640px的,所以设置font-size:62.5%比较写值,但是屏幕缩小后的font-size比例我不知如何把控,不知这样写对不对?min-width: 580px和max-width:580px会不会冲突呢?...
杨冬芳 2019-12-01 20:07:29 1341 浏览量 回答数 1

回答

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <title>示例</title> <style> html { font-size: 10px; } body { font-size: 1.4rem; } .list ul { list-style: none; margin: 0; padding: 0; line-height: 2.9rem;; } .list ul li { border: 1px solid #ddd; margin-top: -1px; } .list ul li a { display: block; padding: 0 0 0 3rem; position: relative; text-decoration: none; color: #333; } .list ul li a:hover { background-color: #f0f0f0; color: #090; } /** * 在下面写 background 加图片即可 */ .list ul li a:before { content: "?"; position: absolute; width: 2rem; height: 2rem; left: .5rem; top: .5rem; border-radius: 1rem; line-height: 2rem; text-align: center; background: #f0f0f0; } .list ul li a:hover::before { content: "@" } </style> </head> <body> <div class="list"> <ul> <li><a href="#">这是一个标题</a></li> <li><a href="#">这是一个标题</a></li> <li><a href="#">这是一个标题</a></li> <li><a href="#">这是一个标题</a></li> <li><a href="#">这是一个标题</a></li> </ul> </div> </body> </html>
a123456678 2019-12-02 02:25:02 0 浏览量 回答数 0

回答

PC版的网站普遍width宽度都是固定的,比如常用的980px。一般情况下,PC显示器的分辨率像素px可以认为等价于CSS里像素的值,但手机上就不一样了,比如5英寸1080P(1920×1080)分辨率的手机比如小米4,其window.document.body.clientWidth也就是viewport的width只有360px,显然,手机上的CSS中的1px并不等于手机屏幕的1px。 所以,手机版网站,特别之处就在于要做宽度自适应,先来一句声明: 该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放. 布局方法:1、width:320px; 固定宽度居中,在iPhone4上效果刚好,但大一点的手机,两边就会有空白,所以这样搞感觉不好。2、min-width:320px; max-width:480px; width:100%; 最小宽度320px,最大宽度480px,在320px和480px之间自动适应宽度,看起来还行。容器里面的块,你同样可以用百分比布局,比如左边的60%,右边的40%,就算是图片,在合理范围内,宽被拉伸,影响也不大,我现在就用这招。3、@media(媒体查询),segmentfault.com用的就是这招,有点编程的味道,有点复杂,个人不感冒。4、rem等比例适配所有屏幕:html{ font-size: 20px; } .btn { width: 6rem; height: 3rem; }这里.btn的6rem等于6×20px=120px。你可以用window.document.body.clientWidth拿到屏幕宽度,然后根据屏幕宽度设置html的font-size的值,从而实现调整整个页面的rem值。这个也有点复杂,我也没用。5、设置viewport进行缩放:以320px宽度为基准进行缩放,最大缩放为320*1.3=416,方法简单粗暴又高效。 Firefox的响应式设计视图(Ctrl+Shift+M)和Chrome的设备模式都能调试移动端网页。 参考: http://isux.tencent.com/web-app-rem.html
杨冬芳 2019-12-02 02:52:17 0 浏览量 回答数 0

问题

Listview 在本地测试的时候正常显示数据,发布qap离线包之后,线上无法正常显示数据了

代码如下http://codepen.io/anon/pen/evvWaZ import { Icon, ListView } from 'nuke'; import {createElement, Component, render} f...
千牛的牛 2019-12-01 20:00:44 1101 浏览量 回答数 1

问题

【CSS学习全家桶】416道CSS热门问题,阿里百位技术专家答疑解惑

阿里极客公益活动:或许你挑灯夜战只为一道难题或许你百思不解只求一个答案或许你绞尽脑汁只因一种未知那么他们来了,阿里系技术专家来云栖问答为你解答技术难题了他们用户自己手中的技术来帮助用户成长本次活动特邀百位阿里技术专家对CSS常见问题进行了集...
管理贝贝 2019-12-01 20:07:24 8458 浏览量 回答数 1

云产品推荐

上海奇点人才服务相关的云产品 小程序定制 上海微企信息技术相关的云产品 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 自然场景识别相关的云产品 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务 阿里云AIoT