专栏首页蚂蚁开源社区HTML+CSS,PC端/手机端公用部分样式代码整理(自己收藏)

HTML+CSS,PC端/手机端公用部分样式代码整理(自己收藏)

把自己平时用的CSS公共样式整理发上来,方便自己查看也方便共享

一:移动端公共样式


/* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解决IOS默认滑动很卡的情况 */ -webkit-overflow-scrolling : touch; } /* 禁止缩放表单 */ input[type="submit"], input[type="reset"], input[type="button"], input { resize: none; border: none; } /* 取消链接高亮 */ body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* 设置HTML5元素为块 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* 图片自适应 */ img { width: 100%; height: auto; width: auto9; /* ie8 */ display: block; -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/ } /* 初始化 */ body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; } body { font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif; color: #fff; background-color: #F7F7F7; } em, i { font-style: normal; } ul,li{ list-style-type: none; } strong { font-weight: normal; } table{ border-collapse:collapse; border-spacing:0 } textarea { resize:none; /*禁用了文本的拖拉,尤其在谷歌下*/ } p { word-wrap:break-word; /* 不够的单词自动换行 而不会被截掉 */ } .clearfix:after { content: ""; display: block; visibility: hidden; height: 0; clear: both; } .clearfix { zoom: 1; } a { text-decoration: none; color: #fff; font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif; } a:hover { text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: 'Microsoft YaHei'; } img { border: none; } input{ font-family: 'Microsoft YaHei'; } /*单行溢出*/ .one-txt-cut{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*多行溢出 手机端使用*/ .txt-cut{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; /* -webkit-line-clamp: 2; */ -webkit-box-orient: vertical; } /* 移动端点击a链接出现蓝色背景问题解决 */ a:link,a:active,a:visited,a:hover { background: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } .overflow {overflow:hidden; } .w50{ width: 50%; } .w25{ width: 25%; } .w20{ width: 20%; } .w33{ width: 33.333333%; } .fl{ float: left; } .fr{ float: right; } .db{ display: block !important; } .dn{ display: none; } /* 附加 */

二:PC端公共样式


1.简单样式清除

html {width: 100%;-webkit-text-size-adjust:none;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);height: 100%;} body {width: 100%;height: 100%;font-size: 16px; color: #fff;line-height: 24px;background: #fff;min-height: 100%;font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;} * {margin: 0;padding: 0;border: 0;} ul,ul li,ol,li {list-style: none outside none;} img {vertical-align: middle;border: none;width: 100%;} i {font: inherit;} input,select,option {vertical-align: middle;border-radius: 0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;} input[type="text"],input[type="button"],input[type="submit"],input[type="reset"] {-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;} .fl {float: left;display: inline;} .fr {float: right;display: inline;} h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;} select::-ms-expand { display: none; } a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} a:hover {text-decoration: none;outline: none;} .clear {clear: both;} .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix {zoom: 1;display: block;_height: 1px;clear: both;} body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin: 0;padding: 0;

2.ie

/* * <!--[if IE]> * <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" /> * <![endif]--> */

3.手机APP常用部分样式代码整理

<!-- UC强制全屏 --> <meta name="full-screen" content="yes" /> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true" /> <!-- UC应用模式 --> <meta name="browsermode" content="application" /> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app" /> <pre name="code" class="html"><!-- <span style="font-family: Arial, Helvetica, sans-serif;">屏幕自适应 高度</span> --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- <span style="font-family: Arial, Helvetica, sans-serif;">js禁止手机浏览器里双击放大页面的功能?</span><span style="font-family: Arial, Helvetica, sans-serif;">--></span> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <link rel="stylesheet" media="screen and (min-width:950px) and (max-width:1920px)" href="css/web.css" ><!-- web样式调用 --> <link rel="stylesheet" name="viewport" media="only screen and (max-device-width:640px)" href="css/phone640.css" ><!-- 手机屏幕640px时调用 -->

三 移动端HTML


<html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 关键字和描述 --> <meta name="keywords" content="互联网,IT开发,区块链"> <meta name="description" content="网站是什么事没什么什么事没什么,其实没什么"> <title>index</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <!--收藏--> <!-- <link rel="shortcut icon" href="/favicon.ico"> --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--微信缓存--> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <!-- 图标LOGO --> <link rel="icon" href="images/logo.ico" type="image/x-icon"/> <link rel="stylesheet" href="css/comment.css"> <!-- jS --> <script type="text/javascript" src="js/comment.js"></script> </head> <body> </body> </html>

四 移动端px转换rem .js


转换比是1:20(即:20px = 1rem) 也可以自己根据需求调

// px转化成rem (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=750){ docEl.style.fontSize = '20px'; }else{ docEl.style.fontSize = 20 * (clientWidth / 375) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

不管是PC还是移动端

我们一般都会提一个 .overflow {overflow:hidden} 方便布局,也可以有效的阻止移动端上下左右拖动问题(溢出问题)

类似于 JD 缩放不会打乱布局

个人喜欢加载layout 上面

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:思齐大神

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简单实用的jQuery响应式网格瀑布流布局代码解析/附源码下载

    这是一款仿Pinterest网站的简单实用的响应式网格瀑布流布局js插件。该js插件通过简单的CSS和js代码制作出流式布局的网格系统,并通过媒体查询来控制网格...

    用户5997198
  • 【WebApp开发必知】移动游览器私有Meta属性

    Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。

    用户5997198
  • 前端常见技术点-Javascript扫盲(26问)

    这里总结一下 WEB 前端面试 JS 部分的常见问题,同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工...

    用户5997198
  • vue-meta让你更优雅的管理头部标签

    https://segmentfault.com/a/1190000012849210

    前端博客 : alili.tech
  • Torchmeta:PyTorch的元学习库

    元学习研究和开放源代码库提供了一种通过标准化基准和各种可用数据集对不同算法进行详细比较的方法,从而可以完全控制此评估的复杂性。但是,大多数在线可用的代码都有以下...

    代码医生工作室
  • Stomp Over Websocket文档

    前两天整理了websocket的资料,今天就把上次没说完的Stomp.js好好说一说~ Stomp Over Webscoket参考文档:http://jm...

    前端博客 : alili.tech
  • 自定义QQ发网址显示卡片内容

    自定义QQ聊天窗口发网址显示卡片内容,标题,图片,当然使用meta标签也可以达到该接口的作用。

    陌涛
  • Arxiv机器学习论文摘要10篇(2019-7-17)

    原文标题:Two-stage Optimization for Machine Learning Workflow

    Jarvis Cocker
  • TiDB HTAP 深度解读

    HTAP (Hybrid Transactional / Analytical Processing)是近些年需求不断受到关注的技术名词,它描述了一个数据库能够...

    PingCAP
  • Current Biology:海马损伤患者的睡眠特征

    海马在睡眠相关的记忆加工中扮演关键的角色,但目前尚不清楚海马决定哪些特定的睡眠特征。针对局灶性双侧海马损伤和健忘症患者睡眠生理机制的研究可为其提供重要证据,但这...

    用户1279583

扫码关注云+社区

领取腾讯云代金券