前端开发项目遇到的实用问题汇总

1.移动端输入六位密码 光标位置不对

解决办法，把它移到看不见的地方

input{

text-indent: -999em;

margin-left: -100%;

width: 200%!important;

}

2.textarea 文本域

resize: none; //禁止放大

overflow-y: hidden; //进度条

3.遮罩层

.shelter{

position: fixed;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,.4);

z-index: 10;

display: none;

}

4.打电话,发短信

<a href="tel:0755-10086">打电话给:0755-10086</a>

<a href="sms:10086">发短信给: 10086</a>

5.rem px 移动端适配问题

移动端字体单位font-size选择px还是rem

　　对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可

　　对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较大的设备

@media screen and (max-width: 321px) {

body {

font-size: 16px;

}

}

@media screen and (min-width: 321px) and (max-width: 400px) {

body {

font-size: 17px;

}

}

@media screen and (min-width: 400px) {

body {

font-size: 19px;

}

}

<script>

// px与rem单位的换算

(function(){

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

})();

</script>

6.可输入的div

<--输入完后，准备点击确定按钮回复-->

<div contenteditable="true" data-id="+result.id+" class="shopReply">回复买家</div>

<--已回复买家的评价-->

<div contenteditable="false" data-id="+result.id+" class="shopReply">谢谢您，我们会更好的为您服务</div>

div上模拟placeholder

<div id="content" class="inputcontent needsclick" placeholder="有问题就尽管提问吧" contenteditable="true"></div>

<style>

.inputcontent:after {

display: inline-block;

width: 100%;

color: #999;

content: attr(placeholder);

}

</style>

7.重定向

重定向是网页制作中的一个知识，几个例子跟你说明，假设你现在所处的位置是一个论坛的登录页面，你填写了帐号，密码，点击登陆，如果你的帐号密码正确，就自动跳转到论坛的首页，不正确就返回登录页；这里的自动跳转，就是重定向的意思。或者可以说，重定向就是，在网页上设置一个约束条件，条件满足，就自动转入到其它网页、网址。

window.location.href = 'goods_management.html?tab=audit';

8.input文本框输入数字时，小数点后面只保留2位

$('#goodsPrice').blur(function() {

var money = $(this).val() - 0.0;

$(this).val(money.toFixed(2));

});

9.刷新当前页面

window.location.reload()： //刷新当前页面

<meta http-equiv="refresh" content="3600"> //1小时刷新一次

10.移动端 1px border 实现

部分安卓机器(比如小米)的分辨率低，如果border的宽度小于1px。安卓机出现一种边框消失了的现象。样式上有点奇怪，IOS没有这个问题。

由于设备高分辨率屏的原因，逻辑像素的 1px 的 border 在移动设备上会用两个或三个物理像素来表示，所以看起来会感觉很粗。解决方案有很多，但兼容性最好的方案是用伪元素的 box-shadow 或 border 实现 border，然后用 transform: scale(.5) 缩小到原来的一半

11.阻止旋转屏幕时自动调整字体大小

* {

-webkit-text-size-adjust: none;

}

禁止 iOS 识别长串数字为电话

<meta name="format-detection" content="telephone=no" />

input的placeholder会出现文本位置偏上的情况

line-height：normal;

12.键盘

<input type="number" pattern="[0-9]*" />

<input type="password" pattern="[0-9]*" />

注意：只有number或者tel还是不够，只有加入正则，ios才会出现九宫格

13.flex布局

display: flex;

display: -webkit-box;

display: -webkit-flex;

注： 如果用flx布局必须要加，不加的话，ios版本为8的机子页面会错乱

详情链接：点击打开链接