移动端APP CSS Reset及注意事项CSS重置-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

移动端APP CSS Reset及注意事项CSS重置

简介: @charset "utf-8"; * {    -webkit-box-sizing: border-box;     box-sizing: border-box; } //禁止文本缩放 字体设置  取消touch高亮效果 html {     width: 100%;     height: ...

@charset "utf-8";

* {

   -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

//禁止文本缩放 字体设置  取消touch高亮效果

html {

    width: 100%;

    height: 100%;

   margin: 0px;

   padding: 0px;

   -webkit-text-size-adjust: 100%;

   font-family: -apple-system, "PingFang SC","Helvetica Neue", Helvetica, STHeiTi, sans-serif;

   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

   font-size: 62.5%;

    background: transparent;

   }

body {

    width: 100%;

    height: 100%;

   -webkit-overflow-scrolling: touch;

 }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, sumary {

    margin: 0;

    padding: 0;

}

//清除输入框内阴影

input, select,textarea {

border: 0;

-webkit-appearance: none;

appearance:none;

}

ol, ul {

    list-style: none;

}

//禁止选中文本内容

*:not(input, select, textArea) {

    -webkit-user-select: none;

}

//禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

img,a{

-webkit-touch-callout:none;

}

a,a:active,a:hover {

text-decoration: none;

}

//去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)

a,button,input,textarea{ 

-webkit-tap-highlight-color:rgba(0,0,0,0);

}

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章