原文:关于移动终端布局和pc端写法_xuguibin8的博客-CSDN博客_移动端写法

一、移动端准备工作

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">  <!-- 当设置在苹果手机上以应用模式启动时，是否全屏 --> <meta name='apple-touch-fullscreen' content='yes'> <!-- ios 系统 作用未知 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- iso 系统 作用未知 --> <meta content="fullscreen=yes,preventMove=no" name="ML-Config"> <!-- iso 系统 作用未知 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" />  <!-- 是否识别 手机号码、 电子邮件 地址 等-->   <meta name="format-detection" content="telephone=no,email=no,address=no" />  <!-- 让360双核浏览器使用webkit内核渲染页面 -->    <meta name="renderer" content="webkit">   <!-- 避免IE使用兼容模式 -->    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <--允许全屏模式浏览，隐藏浏览器导航栏--> <meta name="apple-mobile-web-app-capable" content="yes" />  <!--微信缓存-->   <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" />    1.  <!--[if lt IE 9]> 2.  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 3.  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 4.  <![endif]--> 

二：pc端准备工作

1.  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  1.  <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> 2.  <!-- 让360双核浏览器使用webkit内核渲染页面 -->        <meta name="renderer" content="webkit">       1.  <!--[if lt IE 9]>     2.  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>     3.  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>     4.  <![endif]--> 

三：base.css公共样式 pc端

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, label, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0；border: 0;}  ol,li,ul,dl,dt,dd{list-style:none;}  table{border-collapse:collapse;border-spacing:0}  h1,h2,h3,h4,h5,h6,i,label {font-weight: normal;}    img {vertical-align: middle;border: none;width: 100%;}   i {font: inherit;}    a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color:transparent;}  a:hover {text-decoration: underline; outline: none;}    select::-ms-expand { display: none; }    a:active,a:hover{outline:0}  .clearfix::before, .clearfix::after{     content: '';     display: block;     height: 0;     line-height: 0;     visibility: hidden;     clear: both;  }  .fl{ float:left;} .fr{float:right;}  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;}    .overflow {overflow:hidden; }   

四：base.css公共样式 移动端

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, label, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0}  ol,li,ul,dl,dt,dd{list-style:none;} .fl {float: left;}   .fr {float: right;}   table{border-collapse:collapse;border-spacing:0}  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: auto\9; /* ie8 */  
    -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/  
}  
em, i {  
    font-style: normal;  
}  
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;  outline: 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%;  

}  

五：移动端 布局使用方法rem

第一种：js控制html字体大小， js代码放在head里面

html设置初始font-size：640px的字体大小

var html = document.getElementsByTagName('html')[0];
if(html){         
  var w = window.innerWidth;
  var fontSize = (w > 640 ? 640 : w) / 640 * 30;  //这里最少30，         
  html.style.fontSize = fontSize + 'px';     
}     
window.onload = function(){         
  window.onresize = function(){             
    var w = window.innerWidth;             
    console.log(w);             
    var fontSize = (w>640?640:w)/640 * 30; // 这里最少30，             
    html.style.fontSize = fontSize + 'px';         
  }     
}

第二种：js控制html字体大小常用 ，js代码放在head里面

html设置初始font-size：320px的字体大小

(function(doc, win) {      
  var docEl = doc.documentElement;      
  var resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize';         
  var recalc = function() {          
    var clientWidth = docEl.clientWidth;          
    if (!clientWidth)              
      return;          
    docEl.style.fontSize = (clientWidth>640?640:clientWidth)/ 320 *20 +  'px';      
  };      
  // 不同浏览器resize事件处理机制不同      
  // 使用定时器延迟处理resize回调函数以降低重复响应      
  var recalcTimer = null;      
  var delaycalc = function() {          
    win.clearTimeout(recalcTimer);          
    recalcTimer = win.setTimeout(recalc, 100);      
  };      
  // 移动端不需要考虑事件注册函数的兼容性      
  if (!doc.addEventListener)          
    return;      
  win.addEventListener(resizeEvt, delaycalc, false);      
  // DOMContentLoaded事件只在DOM文档树加载完毕触发，此处不用延迟处理   
  doc.addEventListener('DOMContentLoaded', recalc, false); 
})(document, window);  

六：PC端 布局使用方法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>=640){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

———————————————— 版权声明：本文为CSDN博主「xuguibin8」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/xgb0610/article/details/80416024