实用前端小知识

/* 单行文字溢出省略号 */

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
height: xxx;

// 在各个浏览器之间的兼容问题

transform: translateY(-30px);

-ms-transform: translateY(-30px); /* IE 9 */

-moz-transform: translateY(-30px); /* Firefox */

-webkit-transform: translateY(-30px); /* Safari 和 Chrome */

-o-transform: translateY(-30px); /* Opera */

//多种背景色

background:-webkit-gradient(linear,left bottom,right top,from(#55c2e7),to(#3386ff)) #3285ff;

/* 多行文字溢出省略号 */

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;height: xxx;

/* 多行文字溢出省略号 */

word-wrap:break-word;

 

/* 判断手机端跳转 */

var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate",
　　　　　　 "bada", "nokia", "lg", "ucweb", "skyfire");
var browser = navigator.userAgent.toLowerCase();
var isMobile = false;
for (var i=0; i<mobileAgent.length; i++) {
if (browser.indexOf(mobileAgent[i])!=-1) {
isMobile = true;
location.href = 'http://www.XXX';
break;
}
}

开启电话功能

<a href="tel:123456">123456</a>

开启短信功能：

<a href="sms:123456">123456</a>

 

网页在手机是上等比缩小

<meta name="viewport" content="width=device-width, initial-scale=0.3, maximum-scale=1.0, user-scalable=yes" />

 

 

提供一个实用css技巧的仓库

clone 这个仓库: https://github.com/l-hammer/You-need-to-know-css.git

用yarn 或者 npm全局安装docsify-cli: npm install docsify-cli -g (or yarn global add docsify-cli)

在终端运行命令 docsify serve

打开 http://localhost:3000 在你的浏览器