web技巧总结

 

一、meta的使用

1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览。

2、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉:

<meta name="msapplication-tap-highlight" content="no">

3、忽略页面的数字为电话,忽略email识别 :

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

二、针对适配等比缩放的方法:

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

  body{zoom:3.2;}

}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

  body{zoom:2.4;}

}

@media only screen and (min-width: 640px) and (max-width: 767px) {

  body{zoom:2;}

}

@media only screen and (min-width: 540px) and (max-width: 639px) {

  body{zoom:1.68;}

}

@media only screen and (min-width: 480px) and (max-width: 539px) {

  body{zoom:1.5;}

}

@media only screen and (min-width: 414px) and (max-width: 479px) {

  body{zoom:1.29;}

}

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

  body{zoom:1.25;}

}

@media only screen and (min-width: 375px) and (max-width: 413px) {

  body{zoom:1.17;}

}

@media only screen and (min-width: 360px) and (max-width:374px) {

  body{zoom:1.125;}

}

三、布局

1.布局使用百分比: 

2.em与rem:

3.栅格布局:

四、文本的处理

1、关闭iOS键盘首字母自动大写<input type="text" autocapitalize="off" />

2、//单行文本溢出

.xx{

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;

}

3、//多行文本溢出

.xx{

  display:-webkit-box !importmort;

  overflow:hidden;

  text-overflow:ellipsis;

  word-break:break-all;

  -webkit-box-orient:vertical;

  -webkit-line-clamp:2;(数字2表示隐藏两行)

}

五、图片、媒体的处理

1、//使用流体图片

img{

  width:100%;

  height:auto;

  width:auto\9;

}

2、audio元素和video元素在ios和andriod中无法自动播放

  应对方案:触屏即播

$('html').one('touchstart',function(){

  audio.play()

})

3、如何禁止保存或拷贝图像

  通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:

img {

  -webkit-touch-callout: none;

}

PS:需要注意的是,该方法只在 iOS 上有效。

六、阴影的处理

1、 移动端如何清除输入框内阴影

  在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:

input,textarea {

  border: 0;

  -webkit-appearance: none;

}

七、字体的处理

对于网站字体设置

1、移动端项目:

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

2、移动和pc端项目:

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

3、字体大小尽量使用pt或者em,rem,代替px。

4、设置input里面placeholder字体的大小::-webkit-input-placeholder{ font-size:10pt}

5、解决字体在移动端比例缩小后出现锯齿的问题:-webkit-font-smoothing: antialiased;

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值