vue2.0:(六)、移动端像素border的实现和整合引入less文件
知识点一、如何在手机上看我们制作的移动端页面。
正常我们在电脑上都是按如下图来制作手机页面的:
如果要在手机上面看就不能用localhost了。所以,进入命令行,输入ipconfig查看本地ip地址:
然后返回本地页面,把localhost替换成这个地址。然后把整体输入在手机上,就能看到页面在手机上的样子了。
接下来制作我们的像素border。
第一步:
mixin.less
代码:
.border-1px(@color){
position:relative;
&:after{
display:block;
position:absolute;
left:;
bottom:;
width:100%;
border-top:1px solid @color;
content:'';
}
}
第二步:app.vue使用:
代码:
<style lang="less">
@import 'common/style/mixin'; <!---------------------这里是导入
#aaa
.tab{
display:flex;
width:100%;
height:40px;
line-height:40px;
.border-1px(rgba(7,17,27,0.1)); <!---------------------这里是使用
.tab-item{
flex:1;
text-align: center;
a{
display:block;
font-size:14px;
color:#ccc;
&.active {
color:rgb(240,20,20);
}
}
}
}
</style>
接下来,需要给这个after伪类做一个缩放。
代码如下:
@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);
}
}
}
然后,我们还需要加一个总的less,把它们一起引入到main.js里面。如图:
最后一步,我们需要把这个total.less引入到main.js里面。
我当时引入完了之后报了一个错:是如下的错:
然后我上网查找了很多相关文档博客,大致意思都说是和webpack配置文件有关。看到有一个人所自己卸载了style-loader然后重新安装,并没有配置webpack里面的相关东西。并附上了图,我一看,嗯,就是少了下图红框里的部分。我懒啊,没有卸掉重新装,直接注释掉。于是打开配置文件,在config文件夹里,注释了两个代码,就不报错了。样式也能继续用:
最后一个注意:更改完webpack等配置文件后需要重启服务。
vue2.0:(六)、移动端像素border的实现和整合引入less文件的更多相关文章
- 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- vue2.0做移动端开发用到的相关插件和经验总结1.0
最近在用vue2.0做微信公众号相关的前端开发,经过这次开发实践,现将项目中用到的相关比较实用的插件及遇到的相关问题进行整理,希望和大家共同交流...... cssrem:一个CSS值转REM的VSC ...
- vue2.0做移动端开发用到的相关插件和经验总结
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- vue2.0 在微信端如何使用本地IP访问项目
我们会遇到这样的需求,在PC端开发vue脚手架项目,希望在微信端随时浏览页面(如果打包再发布到服务器又太麻烦),怎么办? 思路很简单:保证手机和电脑在同一个IP下,用同一个IP访问项目,这样就可以了: ...
- Vue2.0 开发移动端音乐webApp 笔记
项目预览地址:http://ustbhuangyi.com/music/#/recommend 获取歌曲 url 地址方法升级:https://github.com/ustbhuangyi/vue-m ...
- vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...
- Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)
https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- vue2.0从头开发项目管理系统
1.自己的github建一个项目. 2.本地vue2.0项目初始化. 安装node.js,检查node版(node -v). 安装webpack(npm install webpack -g),检查w ...
- 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)
前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...
随机推荐
- Spring框架中的@Import、@ImportResource注解
spring@Import @Import注解在4.2之前只支持导入配置类 在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean 使用场景: import注解主要用在基于ja ...
- Spring boot 学习八 Springboot的filter
一: 传统的javaEE增加Filter是在web.xml中配置,如以下代码: <filter> <filter-name>TestFilter</filter-nam ...
- QT画矩形
第一次发QT的博文,本人对QT接触没多久,还在入门水平,大牛勿喷哈,之前因为C# (.net framework)做出来的绘制矩形的程序闪的太厉害了,现在用QT重做一个 先上效果图 代码贴全了 #i ...
- win32常用代码整理
1.ShellExecute [Use ShellAPI] ShellExecute(Handle, 'open', 'http://www.cnblogs.com/lovelp/', nil, ni ...
- select2的远程加载非分页实例
$("#c01-select").select2({ ajax: { url: "data.json", dataType: 'json', delay: 25 ...
- python中出现 IndentationError:unindent does not match any outer indentation level
python中出现IndentationError:unindent does not match any outer indentation level 今天在网上copy的一段代码,代码很简单,每 ...
- MATLAB进行假设检验
4.8.1 已知,单个正态总体的均值μ的假设检验(U检验法) 函数 ztest 格式 h = ztest(x,m,sigma) % x为正态总体的样本,m为均值μ0,sigma为标准差,显著 ...
- Lightoj1028【计算约数个数】
思路: 最终就是求一个数的约数(除了1)对吧. 然后想要枚举sqrt(N)受阻,枚举素数数组受阻,加上prime[i]*prime[i]<=n就好了?那就好了吧. #include <bi ...
- MySQL学习中,遇到的问题记录
一.安装mysql时,报错:1045 原因:因为之前安装过mysql,之后再安装会出现这个问题. 解决: 删除之前的残留就好了 方法:清除mysql之前的历史残留
- jzoj6002. 【PKUWC2019模拟2019.1.15】Permutation (组合数)
题面 题解 设\(lim=(n-1)/2\)(这里是下取整),那么\(x\)位置的值最大不能超过\(lim\),而\(y\)处的值不能小于\(y\),于是有\[Ans=\sum_{i=1}^{lim} ...