横屏/竖屏提醒 ➕PC端/手机端公用部分样式代码整理
<style>
/*竖屏*/
@media only screen and (orientation:portrait ) {
}
/*横屏*/
@media only screen and (orientation:landscape) {
body *{ display:none;}
body{ }
body:after{ content:"为了更好的体验,请使用竖屏游览!!!"}
}
</style>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 禁用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; }
2:PC端公共样式
2.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.2.ie
/*
* <!--[if IE]>
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
* <![endif]--> */
三:手机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);