css
Zora1205060540010
我是一只前端小菜鸟,想飞却怎么也飞不高!
展开
-
css引入特殊字体
1.首先获取你所要使用的字体包; 2.使用@font-face命名(poitfont)并导入字体(url); 3.最后效果,实现下图的点字原创 2017-10-12 09:46:21 · 622 阅读 · 0 评论 -
手机端页面自适应解决方案—rem布局进阶版
https://www.jianshu.com/p/985d26b40199 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置)<script>!function(e){function t(a){if(i[a])return i[a]....转载 2018-05-16 21:37:39 · 332 阅读 · 0 评论 -
前端页面的适配使用rem换算
https://www.cnblogs.com/liangxuru/p/6970629.html 为什么要使用rem之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊。Px是相对固定单位,字号大小直接被定死,所...转载 2018-05-16 21:38:44 · 448 阅读 · 0 评论 -
防止页面加载图片抖动css
padding-bottom:27.1% 这个是图片的高宽比列 如img的宽高分别为200,100, 那么padding-bottom=100/200=50%转载 2018-06-05 11:27:59 · 2428 阅读 · 0 评论 -
vue 使用 px2rem-loader 自动将px转换rem
cnpm intall px2rem-loader // 安装px2rem-loader 在 build\utils.js 修改成下面的代码。 // 在 cssLoaders 方法内添加下列代码 const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 64 //设计稿宽度/10 ...转载 2018-07-11 13:33:32 · 2709 阅读 · 0 评论 -
css实现瀑布流布局
现在距离2012年已经过去了五个年头,CSS的技术更新也是日新月异,在这几年当中出现了很多新的布局方法,比如多列布局multi-columns、Flexbox布局以及今年浏览器支持有Grid布局。早前在《CSS布局的未来》一文中有对这些布局做过阐述。既然CSS的布局有这么多的变化,那么今天有没有不借助任何JavaScript(纯CSS方案)能否实现瀑布流布局?答案是肯定的,接下来的内容,我们就使用...转载 2018-09-05 15:12:31 · 477 阅读 · 0 评论 -
移动端项目中 @2x 图 和 @3x 图 的使用
移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小: 1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询),判断设备的dpr。 1 2 3 4 5 6 @mixin bg-image($url) { background-image: url($ur...转载 2018-10-17 10:13:07 · 565 阅读 · 0 评论