一：移動端準備工作

<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-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" />

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

二：pc端準備工作

<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="renderer" content="webkit">
1.

三：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, strong, 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,strong {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公共樣式移動端

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：320px的字型大小

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 = ;
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);

第三種：用媒體查詢控制html字型大小

一：字型大小為15px開始常用

html {
font-size: 15px
} html {
font-size: 4.7vw;
/* rem(root element)配合vw(viewport width) */
} @media only screen and (min-width:320PX) and (max-width:359PX) { html { font-size: 15px } } @media only screen and (min-width:360PX) and (max-width:374PX) { html { font-size: 16.875px } } @media only screen and (min-width:375PX) and (max-width:389PX) { html { font-size: 17.5781px } } @media only screen and (min-width:390PX) and (max-width:400PX) { html { font-size: 18.75px } } @media only screen and (min-width:401PX) and (max-width:414PX) { html { font-size: 19.4063px } } @media only screen and (min-width:415PX) and (max-width:640PX) { html { font-size:22.5px } } @media screen and (min-width:641PX) { html { font-size: 30px } }

二：字型大小為13.65px 不常用

html { font-size: 4.2vw; /* rem(root element)配合vw(viewport width) */ } html { font-size: 13.65px } @media only screen and (min-width:320PX) and (max-width:360PX) { html { font-size: 13.65px } }
@media only screen and (min-width:360PX) and (max-width:375PX) { html { font-size: 15.36px } }
@media only screen and (min-width:375PX) and (max-width:390PX) { html { font-size: 16px } }
@media only screen and (min-width:390PX) and (max-width:414PX) { html { font-size: 16.64px } }
@media only screen and (min-width:414PX) and (max-width:460PX) { html { font-size: 17.664px } } @media only screen and (min-width:460PX) and (max-width:640PX) { html { font-size: 20px } } @media screen and (min-width:640PX) { html { font-size: 27.31px } }

六：移動端佈局用flex和自動縮放

新舊版本相容：這裡設定flex容器為.box，子元素為.item

1、Flex 佈局

.box{
相關推薦

移動端佈局和pc端寫法

一：移動端準備工作<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-eq

web頁面常用佈局（pc端佈局和移動端佈局）

web頁面常用佈局（pc端佈局和移動端佈局）什麼是web佈局呢？佈局也可以叫做排版，它指的是把文字和圖片等元素按照我們的意願有機地排列在頁面上，佈局的方式分為兩種： 1、table佈局：通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框

移動端和pc端事件綁定方式以及取消瀏覽器默認樣式和取消冒泡

一次註意倒序 bind 註冊 all fun top 綁定 ### 兩種綁定方式 (DOM0)1.obj.onclick = fn; (DOM2)2. ie:obj.attachEvent(事件名稱，事件函數); 1.沒有捕獲(非標準的ie 標準的ie底下有

web移動端和PC端利用chrome同步開發調試

orm 暫時 ng-click flow fill idt style ini nts web移動端和PC端利用chrome同步開發調試

使用vue實現簡單鍵盤，支持移動端和pc端

gif dem 光標 amp ase onf agen slice borde 常看到各種app應用中使用自定義的鍵盤，本例子中使用vue2實現個簡單的鍵盤,支持在移動端和PC端使用，歡迎點贊實現效果： Keyboard.vue <template&am

asp.net Core 使用過濾器判斷請求客戶端是否為移動端,並實現PC端和移動端請求對映和自動跳轉

很多時候我們做網站時單純的用bootstrap等前端框架實現的前端自適應帶給使用者的體驗並不太好，所以為了提高使用者體驗會專門針對PC端網頁重新設計一套移動端網頁，但是怎麼才能做到在移動端訪問PC頁面的時候返回對應的移動端頁面，而不是PC端頁面呢？下面我們就簡單的進行介紹。主要技術是asp.net core。

1.移動端和PC端的區別

1.PC考慮的是瀏覽器的相容性，而移動端開發考慮的更多的是手機相容性，因為目前不管是android手機還是ios手機，一般瀏覽器使用的都是webkit核心，所以說做移動端開發，更多考慮的應該是手機解析度的適配，和不同作業系統的略微差異化。 2.在部分事件的處理上，移動端多出來的事件是觸屏事件，而

一個簡單的腳手架drop-cli、vue的元件庫、移動端架構和pc管理後臺模版

鑑於自己的經驗和以往做過的專案，為了提高工作效率，特意整理了一下專案模版、vue元件庫等模版並新增到一個自己封裝的腳手架drop-cli中。不喜勿噴！ drop-cli 一個簡單的腳手架,可新增不同的模版/框架 $ npm inst

判斷移動端和pc端,分別跳轉不用的頁面

// 監測瀏覽器跳轉PC if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){

clipboard.js 實現移動端和pc端複製到剪貼簿功能

感謝以下兩個具有幫助性的部落格：在vue中使用clipboard.js 時候發現一個問題，就是如果 :data-clipboard-text = “wechat”使用這個屬性的話在移動端就不

PHP函式判斷移動端和PC端

/*移動端判斷*/ function isMobile() { // 如果有HTTP_X_WAP_PROFILE則一定是移動裝置 if (isset ($_SERVER['HTTP_X_WAP_PROFILE']))

nginx實現wap移動端和PC端業務分離

隨著移動網際網路時代的來臨，很多WEB網站都已經推出了基於手機，Ipad等移動客戶端的頁面訪問，這裡介紹一下如何利用使用者UA實現使用者不同終端下的使用者訪問： $http_user_agent 為nginx的內建引數，通過它可以指定使用者UA滿足某型別時觸發什麼樣的操作

相容移動端和pc端的彈性盒模flexbox

現在主流瀏覽器都支援flex佈局，ie是支援到ie10的，不過一些移動端的支援性和pc端不同。如何適應各個版本的瀏覽器各個裝置呢？新版與舊版彈性盒模型混用： .box{ dis

JS判斷移動端和pc端載入不同頁面

//pc端作判斷 <script> if (/mobile/i.test(navigator.userAgent)) { window.location = 'http://xxxx/mobile.html' } &l

css中移動端和pc端隱藏滾動條

思路：（以隱藏橫行滾動條為例）在原有盒子的基礎上，外層套一個盒子，設定一個高度，超出隱藏，原有盒子的高度大於外層盒子的高度即可程式碼如下： html部分： <div class="hid

JS自動識別移動端和PC端,分配二級域名

(function(){ var res = GetRequest(); var par = res['index']; if(par!='gfan'){ var ua=navigator.userAgent.toLowerCase(); var c

1、移動端 2、後臺 3、移動端，Web 端 4、 PC端

所有 style oid 平臺公眾號移動端公眾 androi nbsp 移動端： 1、公眾號：停開心住總物業 2、app： iso Android 停開心，住總停開心後臺：停開心智慧停車管理平臺（所有的停車場）移動端，Web端：海投

前端裏移動端到底比pc端多哪些知識?

分享好文前端裏移動端到底比pc端多哪些知識，為啥面試時好多公司都問h5水平如何？我做過幾年的web前端開發，就簡單談談自己的感受吧。首先來看看PC端和移動端在前端開發上的一些區別：（1）PC考慮的是瀏覽器兼容性，移動端開發考慮的更多的是手機兼容性，因為目前不管是android手機還是ios手機，

手機端和PC端分別加載不同的js文件

test start strong bar 方法響應式網站 idt rip 通過分手機端和PC端其實方法很多，我們在響應式設計、響應式網站建設中經常碰到此類需求。下面說說我們在項目中遇到的需求：手機端和PC端分別加載不同的js客服代碼（註意：是要在PC和手機端分別加載

用Vue來進行移動Hybrid開發和客戶端間資料傳輸的一種方法

如果大家覺得有用，更多的模組請點選檢視即上一篇Vue 頁面狀態保持頁面間資料傳輸的一種方法,今天我們說說我們團隊是怎麼和客戶端進行互動。為什麼到了今天，還要提hybrid開發，就我所在團隊從中獲得的好處有：團隊較小、業務較重、迭代頻繁、需要緊急響應的團隊和專案比較適合用使用單頁應用技術

移動端佈局和pc端寫法