浏览器移动端html右边有一点白_移动端的一些基础知识和经常会出现的bug

前端开发app框架有哪些 小程序的前端开发框架 微信前端开发框架 mui

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

1、关闭iOS键盘首字母自动大写

2、禁止文本缩放

14、英文文本换行(不拆分单词)word-wrap:break-word;

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

16、设置input里面placeholder字体的大小

::-webkit-input-placeholder{ font-size:10pt;}

17、wap页面有img标签，记得加上display：block；属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。

=======================================================

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

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

input,

textarea {

border: 0;

-webkit-appearance: none;

}

移动端禁止选中内容

如果你不想用户可以选中页面中的内容，那么你可以在“>

ios 有拍照、录像、选取本地图片功能

部分android只有选取本地图片功能

winphone不支持

input控件默认外观丑陋

消除transition闪屏

.

-webkit-backface-visibility: hidden;

}

开启硬件加速

解决页面闪白

保证动画流畅

.

框架

移动端基础框架

zepto.

滑屏框架

适合上下滑屏、左右滑屏等滑屏切换页面的效果

slip.

对于网站字体设置

移动端项目：

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

移动和pc端项目：

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

有关Flexbox弹性盒子布局一些属性

不定宽高的水平垂直居中

.xxx{

position:absolute;

top:50%;

left:50%;

z-index:3;

-webkit-transform:translate(-50%，-50%)；

border-radius:6px;

background:#fff;

}

[flexbox版]不定宽高的水平垂直居中

.xx{

justify-content:center;//子元素水平居中，

align-items:center;//子元素垂直居中;

display:-webkit-flex;

}

//单行文本溢出

.xx{

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

//多行文本溢出

.xx{

display:-webkit-box !importmort;

overflow:hidden;

text-overflow:ellipsis;

word-break:break-all;

-webkit-box-orient:vertical;

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

}

//使用流体图片

img{

width:100%;

height:auto;

width:auto\9;

}

一像素边框(例子:移动端列表的下边框)

.list-iteam:after{

position: absolute;

left: 0px;

right: 0px;

content: ”;

height: 1px;

transform: scaleY(0.5);

-moz-transform: scaleY(0.5);

-webkit-transform:scaleY(0.5);

background-color: #e3e3e3;

}

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

@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;}

}

在后期有更多的经验继续陆续补上，或者大家更好的方法或者经验也分享一下。

前端开发用多多的框架 前端开发四大框架 前端框架开发效率