標籤：
本文簡介：
1、手機移動端頁面的自適應
2、手機觸摸手動滑動效果
一、header資訊的設定（自適應）
1、聲明資訊 <!DOCTYPE HTML>
2、編碼設定 <meta charset="UTF-8">
3、行動裝置特別設定（重要聲明！）
<meta content="width=device-width,user-scalable=no" name="viewport">
Viewport說明：該設定可使我們開發出的頁面/產品 大小可適應各種高端行動裝置
width=device-width 為裝置的寬度.
user-scalable=no/yes 此功能為使用者調整縮放。預設為yes。一般設定為no
PS:初次嘗試製作移動端頁面。親們，由於我沒有加上面的viewport聲明，結果導致頁面狼狽不堪。
二、手機觸摸手動滑動效果
1、觸控螢幕效果滾動組件（js必須包含的部分）
<!--觸控螢幕效果滑動組件--><script type="text/javascript" src="./js/touch.js"></script><script type="text/javascript" src="./js/zepto.extend.js"></script><script type="text/javascript" src="./js/zepto.ui.js"></script><script type="text/javascript" src="./js/slider.js"></script><!--觸控螢幕效果滑動組件end-->
本人親測以上4個js必須包含，缺一不可。
2、所要在手機端做滑動效果的部位（html代碼部分）
<div class="head_nav_C" id="hongye_nav" style="height:60px;"> <div style="background-color:white;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div style="background-color:white;"> bbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div style="background-color:white;"> cccccccccccccccccccccccccccc </div> <div style="background-color:white;"> ddddddddddddddddddddddddd </div> </div>
3、js代碼塊（改代碼會在動在要加滑動效果的html代碼塊中自動產生一塊代碼）
<script> Zepto(function($){//自動載入zepto組件 $("#hongye_nav").slider({//為html 對應的id部分最佳slider屬性 autoPlay : false, //是否自動 showDot : false, loop : true,//是否迴圈 }); })</script>
4、載入slider.css樣式
<link rel="stylesheet" type="text/css" href="css/slider.css" />
附：
另外一種簡單的寫法(適用於幻燈)
html代碼部分
<div id=”fla”>
<img lazyload=”images/img2.jpg” />
<img lazyload=”images/img3.jpg” />
</div>
2、js代碼部分
<script>
//建立slider組件
$(‘#fla‘).slider();
</script>
附：小知識
一、字型效果
color:#FFF 定義字型的顏色
text-shadow:0 0 2px #146F61;(css3.0特效)
CSS3.0的文字陰影 text-shadow
文法：text-shadow: h-shadow v-shadow blur color;
也就是
text-shadow：【x軸（x offset） y軸（Y offst） 模糊半徑（Blur） 顏色（color）】
例如：text-shadow: 5px 5px 5px #FF0000;
二、盒子模型圓角效果
border-radius 屬性
例子：
div
{
border:2px solid;
border-radius:25px;
}
等價於：
div{
border:2px solid;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}
Html5如何使我們開發出來的應用或頁面大小能適合各種高端手機使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
