移動端初識1

<code>viewport(可視區視窗)</code>

<code>     </code><code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"viewport"</code> <code>content</code><code>=</code><code>""</code><code>&gt;（重要）</code>

<code>     </code><code>預設不設定viewport,一般可視區寬度在移動端是980.</code>

<code>     </code><code>width: 可視區的寬度 (number||device-width)</code>

<code>     </code><code>user-scalable 是否允許使用者縮放(yes||no),----&gt;&gt;ios10無效</code>

<code>     </code><code>initial-scale 初始縮放比例</code>

<code>     </code><code>minimum-scale 最小縮放比例</code>

<code>     </code><code>maximum-scale  最大縮放比例</code>

&lt;!--入門練習--&gt;

&lt;!doctype html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

&lt;meta charset="UTF-8"&gt;

&lt;meta name="viewport" content="width=device-width"&gt;

&lt;title&gt;Rem适配&lt;/title&gt;

&lt;script type="text/javascript" src="js/two.js"&gt;&lt;/script&gt;

        &lt;script&gt;

(function(){

var html = document.documentElement;

var hWidth= html.getBoundingClientRect().width;

html.style.fontSize = hWidth/15+"px";

})()

        &lt;/script&gt;

&lt;style type="text/css"&gt;

body,

h1,

ul {

  margin: 0;

  padding: 0;

}

a {

  text-decoration: none;

li {

  list-style: none;

#header {

  height: 2.06rem;

  background: #ef3239;

  position: relative;

  border-bottom: 1px solid #a82d31;

  box-sizing: border-box;

#header a {

  width: 2.56rem;

  height: 1.76rem;

  position: absolute;

  top: 0px;

  text-align: center;

  line-height: 1.76rem;

#header #task {

  left: 0px;

#header #task span {

  font-size: 0.74rem;

#header #refresh {

  right: 0px;

#header #refresh span {

  font-size: 0.72rem;

#header span {

  color: #ffffff;

#header h1 {

  font-size: 0.78rem;

#header h1 span {

  font-size: 0.52rem;

  margin-right: 0.32rem;

.active {

  color: #f23838 !important;

#nav {

  height: 2.1rem;

  background: #fdfdfd;

  border-top: 1px solid #bobobo;

  border-bottom: 1px solid #ccc;

#nav .active span {

  top: 0.14rem;

  left: 0.1rem;

#nav a {

  float: left;

  width: 25%;

  line-height: 2.06rem;

  font-size: 0.7rem;

  color: #848689;

#nav #price_box {

  width: 0.74rem;

  display: inline-block;

  vertical-align: middle;

#nav #price_box span {

  font-size: 0.56rem;

#nav #price_box .glyphicon-chevron-down {

  left: -0.05rem;

  top: -0.08rem;

#nav .glyphicon-filter {

  top: 0.16rem;

#list li {

  height: 5.62rem;

  border-bottom: 1px solid #e0e0e0;

#list a {

  padding: 0.46rem 0.46rem 0.44rem;

  height: 4.7rem;

#list img {

  width: 4.7rem;

#list .soanWrap {

  float: right;

  width: 8.64rem;

#list .soanWrap .sTitle {

  line-height: 0.88rem;

  color: #333;

  margin-top: 0.1rem;

  display: block;

#list .soanWrap .sPrice {

  font-size: 0.76rem;

  line-height: 1.28rem;

  margin-top: 0.62rem;

  color: #f23838;

#list .soanWrap .scommont {

  line-height: 0.94rem;

  color: #808080;

&lt;/style&gt;

        &lt;!--使用了bootstrap的字型樣式--&gt;

&lt;link rel="stylesheet" type="text/css" href="css/two.css"&gt;

&lt;link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css"&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;header id="header"&gt;

&lt;a id="task" href="javascript:;"&gt;

&lt;span class="glyphicon glyphicon-tasks"&gt;&lt;/span&gt;

&lt;/a&gt;

&lt;h1&gt;&lt;span class="glyphicon glyphicon-lock"&gt;&lt;/span&gt;one界面&lt;/h1&gt;

&lt;a id="refresh" href="javascript:;"&gt;

&lt;span class="glyphicon glyphicon-repeat"&gt;&lt;/span&gt;

&lt;/header&gt;

&lt;nav id="nav"&gt;

&lt;a href="javascipt:;" class="active"&gt;綜合&lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;/a&gt;

&lt;a href="javascipt:;"&gt;銷量&lt;span&gt;&lt;/span&gt;&lt;/a&gt;

&lt;a href="javascipt:;"&gt;價格&lt;span id="price_box"&gt;

&lt;span class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;

&lt;span class="glyphicon glyphicon-chevron-down active"&gt;&lt;/span&gt;

&lt;/span&gt;

&lt;a href="javascipt:;"&gt;篩選&lt;span class="glyphicon glyphicon-filter"&gt;&lt;/span&gt;&lt;/a&gt;

&lt;/nav&gt;

&lt;ul id="list"&gt;

&lt;li&gt;

&lt;a href="javascript:;"&gt;

&lt;img src="../images/img.png" /&gt;

&lt;span class="soanWrap"&gt;

&lt;span class="sTitle"&gt;蘋果(Apple) iphone 6(A1586) 16GB 金色 移動聯通電信4G手機

&lt;span class="sPrice"&gt;￥4888.00&lt;/span&gt;

&lt;span class="scommont"&gt;好評96% 59091人&lt;/span&gt;

&lt;/li&gt;

&lt;/ul&gt;

&lt;/body&gt;

&lt;/html&gt;

本文轉自 沉迷學習中 51CTO部落格，原文連結：http://blog.51cto.com/12907581/1939835，如需轉載請自行聯系原作者