製作H5響應式頁面注意事項微信二次分享

7.13活動報名

1.2 頁面製作時，注意布局，通常：

1.2.1 重要的用img標籤（例如頭部banner等包含特定資訊的內容），不重要的底板用背景形式顯示，例如底部背景

1.2.2 img，布局需要通常外層包含乙個父級，例如div、header、p等等

1.2.3 表單通常用form形式（無論是表單提交還是ajax提交），標籤通常用span+input，用p包住，方便布局，例如：

1.2.5 可以用header、section、footer等h5標籤代替div標籤

1.3 切圖要求時：

1.3.1 除非整個背景是複雜的漸變等等，否則一般不切整塊圖做整個頁面背景。通常是一部分一部分切，背景用background-color渲染，需要和設計協商。

1.3.2 切圖時，許多東西可以是，比如特殊字型、小部分特殊規則說明，用的形式避免特殊字型無法顯示的窘境。

1.4 css布局時：

1.4.1 px、em、rem以及百分比%的區別和使用。

px：比較精確和穩定，1px=1畫素，如果設定div寬度為100px，假設螢幕解析度為1024*760，則表示1024解析度（1024px）中有100px被div佔據（解析度以畫素px作為基本單位），這和螢幕大小沒有關係，也不隨顯示視窗大小的改變而改變，只和解析度有關（所以視窗變小了，該div依舊200px，如果視窗不夠大會出現滾動條；但是假設解析度從1024*760改為800*600，此時div依舊200px，那麼div會感覺變大了《因為同樣大小的螢幕，解析度從1024-->800》）

em：1）相對於body元素，1em=body元素的font-size大小 2） em會繼承父級，如果父級設定了font-size，則 1em=父級元素的font-size大小，是相對大小，但是需要確定父級font-size

rem：相對於根元素的font-size大小（沒有了繼承父級尺寸概念，不會巢狀多了混亂），為了方便，通常設定元素大小時10px，此時10px=1rem; 此滿足了自適應不同螢幕大小的要求，用rem或者%做單位

%：百分比是相對於父級元素，注意給最外層設定高度為百分比時，需要給html和body元素設定100%;

html, body

background: url(../img/success.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position:top center;

1.4.3 螢幕自適應，設定html根元素的最小屏和最大屏時的font-size，影響rem

//
螢幕自適應
var ohtml =document.documentelement;
getsize();
window.onresize = function
() ;
function
getsize() 
else
if (screenwidth >= 640) 
else
}

1.4.4 vertical-align：只對行內元素有效，注意不是對文字進行設定，而是對佔空間的等進行設定，text-top、text-bottom

2.1 頁面中引入js檔案

//
分享頁面
var wurl = location.origin + '/h5/..../lottery.html';
var wtit = '標題標題';
var wimg = "位址";
var wdesc = '內容描述';
var this_url = encodeuricomponent(location.href.split('#')[0]);
$.ajax();
wx.ready(
function
() );
title: wtit, 
//分享標題
desc: wdesc, //
分享描述
link: wurl, //
分享鏈結
imgurl: wimg, //
分享圖示
//type: '', // 分享型別,music、video或link，不填預設為link
//dataurl: '' // 如果type是music或video，則要提供資料鏈結，預設為空
}); }
});

製作H5響應式頁面注意事項微信二次分享

微信h5頁面製作總結

h5課件製作 H5課件製作的注意事項

移動端h5開發注意事項

製作H5響應式頁面注意事項 微信二次分享

微信h5頁面製作總結

h5課件製作 H5課件製作的注意事項

移動端h5開發注意事項

相關推薦

製作H5響應式頁面注意事項微信二次分享