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 上面