移动端项目中 @2x 图 和 @3x 图 的使用
移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小:
1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询),判断设备的dpr。
@mixin bg-image($url) {
background-image: url($url + "@2x.png");
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
background-image: url($url + "@3x.png");
}
}
2.css样式中调用 bg-image 方法
div{
width:30px;
height:20px;
background-size:30px 20px;
background-repeat:no-repeat;
@include bg-image('special_1');
}
移动端 border 的 1px 问题:
1.为了方便通用,使用 mixin 定义一个函数。
@mixin border-1px($color) {
position: relative;
&:after{
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid $color;
content: ' ';
}
}
2.对 伪类 :after 进行缩放,以适应不同 dpr 的手机。通过 @media (媒体查询),来确定 设备的 dpr。 为了方便调用,定义一个全局的 class (此处为 border-1px)
// 判断在不同dpr下的显示情况
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
.border-1px{
&::after{
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
.border-1px{
&::after{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
3.html/css样式调用.
html:
<div class="tab border-1px">
<div class="tab-item">
<a v-link="{path:'/goods'}">商品</a>
</div>
<div class="tab-item">
<a v-link="{path:'/ratings'}">评价</a>
</div>
<div class="tab-item">
<a v-link="{path:'/seller'}">商家</a>
</div>
</div>
css:
.tab{
display: flex;
width: 100%;
height: 40px;
line-height: 40px;
@include border-1px(rgba(7,17,27,0.1));
}
.
移动端项目中 @2x 图 和 @3x 图 的使用的更多相关文章
- 将sass快速引入到移动端项目中加速开发
本文以上图为例子: 首先在根目录创建一个sass文件,在sass文件中分别创建4个文件夹bsae,pages,libs,style; base下存放:样式重置_normalize.scss; 自己定义 ...
- vue PC端项目中解决userinfo问题
在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...
- 我们为什么在移动端项目中选择jQuery而不是Zepto
1.文件大小比较 首先从cnd上(http://www.bootcdn.cn/)下载jquery和zepto. jquery下载的是2.2.4版本压缩: zepto下载的是是1.20压缩版本: 二个文 ...
- Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- 一步一步拆解一个简单的iOS轮播图(三图)
导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...
- C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
- 动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:
移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...
- vue项目中,使用vue-awesome-swiper插件实现轮播图
一.安装 npm install vue-awesome-swiper 二.项目中引入 import 'swiper/dist/css/swiper.css'import {swiper,swiper ...
随机推荐
- [BZOJ2878][NOI2012]迷失游乐园(环套树DP+概率)
推荐讲解:https://www.cnblogs.com/Tunix/p/4561493.html 首先考虑树的情况,就是经典的树上概率DP.先DP出down表示从这个点向儿子走能走的期望长度,再DP ...
- 02-MariaDB主从安装SpringBoot整合MyBatis配置
关于MariaDB的介绍 MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为My ...
- ACM -- 算法小结(十)素数的两种打表法
素数的两种打表法 下面介绍两种素数打表法,由于是两年前留下的笔记,所以没有原创链接~~ @_@!! 第一种疯狂打表法: #include<stdio.h> #include<math ...
- leetcode87. Scramble String
leetcode87. Scramble String 题意: 给定一个字符串s1,我们可以通过将它分解为两个非空子字符串来表示为二叉树. 思路: 递归解法 对于每对s1,s2. 在s1某处切一刀,s ...
- 读书笔记_Effective_C++_条款二十六:尽可能延后变量定义式的出现时间
这个条款从字面意思还是很好理解的,就是在使用这个变量前才去定义,而不是很早就定义了它,而在很后面的时候才去使用.这个条款只适用于对变量声明位置没有要求的语言,比如C++.对于像C或者一些脚本语言,语法 ...
- PID控制原理和算法
闭环控制是根据控制对象输出反馈来进行校正的控制方式,它是在测量出实际与计划发生偏差时,按定额或标准来进行纠正的.比如控制一个电机的转速,就得有一个测量转速的传感器,并将结果反馈到控制路线上.提到闭环控 ...
- 思科DCHP解决方案
DHCP功能平时用的不算少,而且本人的几乎所有的DHCP功能都是在交换机上实现的,虽然也可以通过PC实现,而且PC的DHCP Server功能还更完善,比如可以不受DHCP作用域的限制.IP分配情况直 ...
- js利用正则替换图片路径问题
/* * 需求:给图片的src地址前面增加为assets * * 1. 将需要匹配的内容原封不动的写入正则表达式 * 2. 将改变的内容替换为.*? * 3. 将.*?添加(),目的是为了能够将src ...
- x64 寄存器使用
http://blog.csdn.net/cosmoslife/article/details/8771773 http://blog.csdn.net/herx1/article/details/3 ...
- 用 C# 做人脸检测(基于EmguCV)
c#datagridmatlab人脸识别图像处理path 下载源码 准备工作(必须) 下载 EmguCV 傻瓜安装后,把 bin 目录添加到环境变量里去,比如安装在 X:\EmguCV\ 目录下,就 ...