移动端css样式设置
来源:互联网 发布:html5手机网站源码 编辑:程序博客网 时间:2024/05/20 18:46
1、移动端字体定义
body{font-family: Helvetica;}
说明:在pc端,我们通常都会使用“微软雅黑”字体。但在移动端,ios、 android、winphone三大系统都没有“微软雅黑”字体。各手机系统都有自己的默认中文字体,且肉眼很难看出区别。所以在无特殊需求的情况下,直接使用系统默认中文字体就好。
英文和数字都设定为 Helvetica,三种系统都支持。而且,在ios中默认的英文和数字是两种不同的字体,如果不设置成一种字体,显示效果不一样。
2、取消chrome浏览器下默认的文本框聚焦样式。这个解决办法同pc端相同。
没有做设置的情况下,在chrome浏览器中激活input元素。会在input框的周围出现边框。
说明:只要在css样式中,做如下设置即可解决。
input,textarea{outline:none;}
3、移动端长按图片(img)、链接(a)或其他对象,会弹出系统菜单。
例如:在联通的一个业务办理页面,长按按钮后,会弹出系统菜单。
说明:阻止长按页面,弹出菜单的方法。(此方法只针对ios系统,android系统尚未解决)
a, img {-webkit-touch-callout:none;}
4、移动端如何清除输入框内阴影
在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,可以按照下面的方法关闭:
input,textarea{border: 0; -webkit-appearance:none;}
5、移动端,默认情况下当设备切换到横屏显示时,文字大小会发生变化。但如果要禁止文字自动调整大小,ios设备可使用下面的做法:
html{-webkit-text-size-adjust:100%;}
但此方法只对chrome27.0 版本以下有效,27.0以上版本无效。
那么,在新版的chrome,可以使用css3方法,使文字大小不发生变化。这种方法最好运用到具体的对象上。
.box{transform:scale(0.875);}
6、去掉点击链接时,产生的半透明遮罩。
使用ios系统手机的用户,在点击一个链接时,会出现一个半透明灰色遮罩。如下面的例子。
这是招商银行的一个宣传页面,当“点击购买”按钮,就会出现一个灰色的半透明遮罩。
如果想要去掉这个遮罩,可设置-webkit-tap-highlight-color的alpha值为0。部分android系统中元素被点击时,也会产生半透明遮罩或者边框,也用此方法解决。
a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0;) }对于有些机型无法去除,建议可以更换html标签来表示按钮。如把a,input改用div标签。
7、修改输入框提示信息placeholder的文字颜色。
placeholder的文字颜色与输入内容的文字色不同,默认是浅灰色的。如要与输入内容的文字颜色保持一致,可做下面的设置:
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000; }::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000;}:-ms-input-placeholder{ color: #000;}::-webkit-input-placeholder{ color: #000;}为了不出现兼容性问题,要对火狐、Ie、谷歌浏览器分别做设置。
如果要对某个标签或类,id做设置,可以在前面加上就好:
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000; }input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000;}input:-ms-input-placeholder{ color: #000;}input::-webkit-input-placeholder{ color: #000;}
- 移动端css样式设置
- 移动端-css样式技巧
- 移动端常用样式设置
- 移动端常用的css样式
- 移动端 loading图 css样式
- 移动端css样式的心得
- 移动端css样式结构引入
- 移动端初始css设置
- css样式设置
- css 超链接样式设置
- CSS ---关于设置样式
- div+css 样式 设置
- CSS设置hr样式
- CSS链接样式设置
- CSS样式设置技巧
- CSS样式设置详解
- CSS样式--居中设置
- CSS强制设置样式
- LeetCode--Largest Number(最大数字)Python
- 蓝桥杯 算法训练 连续正整数的和
- String
- Android方法数统计
- JavaScript---网络编程(1)-介绍、变量、运算符与语句
- 移动端css样式设置
- 112. Path Sum
- 2017年网络中比较全面的Android面试题
- 结构化机器学习项目Quiz2
- CentOS7关闭firewalld开启iptables
- caffe+python+mnist从图片训练到测试单张图片
- mycat和mysql
- 阿里云MaxCompute携手华大基因打造精准医疗应用云平台
- 79. Word Search