| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
mhxz1036
9年前发布

一个使用最简单的px转rem预处理工具

   <p>如果你使用 <a href="/misc/goto?guid=4959640663020680470" rel="nofollow,noindex">Stylus</a> 作为你的预处理CSS的工具,那么 px2rem 是你使用最简单处理 px 转 rem 工具,使用方法如此简单:</p>    <p>首先安装工具。 <a href="/misc/goto?guid=4959670407571519627" rel="nofollow,noindex">stylus-px2rem</a></p>    <pre>  <code class="language-css">npm install stylus-px2rem --save-dev</code></pre>    <p>然后只要在你的 index.styl 文件引用就可以里</p>    <pre>  <code class="language-css">@import "node_modules/stylus-px2rem"  div{       margin 24px 24px      font-size 14px      padding-bottom 12px      width 100px      height 100%  }</code></pre>    <p><a href="/misc/goto?guid=4959640663020680470" rel="nofollow,noindex">Stylus</a> 工具将 index.styl 编译成 index.css 并预处理将 px 转换成 rem 上面内容输出为:</p>    <pre>  <code class="language-css">div{      margin:1.5rem 1.5rem;      font-size:.875rem;      padding-bottom:.75rem;      width:6.25rem;      height:6.25rem  }</code></pre>    <p>默认 html-font-size =10px 你可以设置它。你可以设置部分样式转化,部分样式不转换成 rem ,你只需这么引用 styl 即可。这种方法 mixins 必须引用它</p>    <pre>  <code class="language-css">@import 'node_modules/stylus-px2rem/lib/mixins'  @import 'node_modules/stylus-px2rem/lib/font-size'  @import 'node_modules/stylus-px2rem/lib/border'  @import 'node_modules/stylus-px2rem/lib/margin'  @import 'node_modules/stylus-px2rem/lib/padding'  @import 'node_modules/stylus-px2rem/lib/width'  @import 'node_modules/stylus-px2rem/lib/height'  @import 'node_modules/stylus-px2rem/lib/line-height'    html-font-size = 10px;    div {      margin 24px 24px      font-size 14px      padding-bottom 12px      width 100px      height 100%  }</code></pre>    
 本文由用户 mhxz1036 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1460474240511.html
HTML CSS 前端技术