怎么制作HTML5頁面讓它適應(yīng)電腦和手機的尺寸？

、利用meta標(biāo)簽

Meta標(biāo)簽主要用來描述一個HTML網(wǎng)頁文檔的屬性，如作者、日期時間、網(wǎng)頁描述、關(guān)鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網(wǎng)站的關(guān)鍵字，讓網(wǎng)頁利于搜索引擎。

解釋：Viewport指用戶網(wǎng)頁的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴(kuò)展，頁面不可縮放。

以上標(biāo)簽只支持一種尺寸，正確的做法是用js動態(tài)生成下面標(biāo)簽，前提是要先獲取屏幕尺寸。

var phoneWidth = parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.);

if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

</script>

2、百分比法

CSS中的百分比中指的是相對于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡單的頁面，復(fù)雜的頁面實現(xiàn)很困難。

3、使用CSS3單位rem

在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請自行查閱），假設(shè)寬度為W，一個div在寬度為640px的設(shè)計稿的下的寬度為dW1，如果html的font-size為100px，那么這個div的寬度用rem表示是多少呢？

計算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設(shè)置一個合適的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數(shù)瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。

所以會在頭部加上這個JS代碼：

var html = document.querySelector(‘html‘);

var rem = html.offsetWidth / 6.4;

html.style.fontSize = rem + "px";

</script>

4、媒體查詢

媒體查詢正是為解決網(wǎng)頁適應(yīng)手機屏幕。媒體查詢的功能就是為不同的“媒體”設(shè)置不同的css樣式，頁面尺寸，設(shè)備屏幕尺寸等，比如我們要為寬度小于480px的頁面中的class="icon"的元素設(shè)置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。

以上幾種方法，僅供大家參考。如有不妥，歡迎指正。制作自適應(yīng)頁面需要比較好的編程基礎(chǔ)和技術(shù)覺悟，一般的小白，不建議大家為了做自適應(yīng)網(wǎng)頁專門學(xué)習(xí)HTML5、CSS3和JS，畢竟這并非一朝一夕就能學(xué)會的。如果技術(shù)小白想做自適應(yīng)網(wǎng)頁，這里給大家提供一種思路，用建站寶盒。完全不需要編程基礎(chǔ)，全程拖拽，一樣能做出讓人驚艷的自適應(yīng)網(wǎng)站。現(xiàn)在還有免費建站活動，無論外行內(nèi)行，大家可以注冊體驗一下。

零基礎(chǔ)免費做HTML5自適應(yīng)網(wǎng)站：http://www.iisp.com/design/free-site.php?s=yuqiuping

視頻制作手機全景漫游應(yīng)該選擇多大尺寸？受眾傳媒短視頻制作，由于手機型號種類眾多，尺寸各不相同，因此手機端html5格式制作上需要注意排版問題，漫游大師中對html5格式在手機的顯示上進(jìn)行了寬度限制，即手機上看html5格式寬度均以640像素為最大的標(biāo)準(zhǔn)。

受眾傳媒短視頻制作

以iphone為例，限定寬為640像素：

所以在針對手機端做全景漫游的時候，受眾傳媒小編提醒大家需要注意以下幾點：

界面寬度限制在640像素內(nèi)，超出不顯示。

界面高度不要太高，否則在像素長度不夠的設(shè)備上不顯示。

例如這里有一排按鈕，5個寬度均為128像素，放成一排正好640像素

注意：全景漫游顯示界面（主窗口）大小最好設(shè)置成手機大小.受眾傳媒用專業(yè)的策劃，為您塑造品牌，講述品牌故事；用精準(zhǔn)的文化輸入，提升您的產(chǎn)品內(nèi)涵；用視覺營銷，讓宣傳簡潔直觀；用整合傳播，讓廣告有的放矢。受眾傳媒，服務(wù)于客戶品牌價值的提升，致力于電視廣告TVC、品牌形象宣傳片、微電影、企業(yè)宣傳片、等商業(yè)影像的制作。。多年影視制作經(jīng)驗，百余家客戶見證。歡迎來電垂詢。

受眾傳媒短視頻制作

TML5 為前端開發(fā)者帶來了許多表單增強功能，這些功能使得創(chuàng)建交互式和用戶友好的表單變得更加容易。在本文中，我們將介紹幾種 HTML5 新增的表單功能，并提供完整的 HTML 示例，以幫助你了解如何在實際項目中應(yīng)用這些功能。

1. 新的輸入類型

HTML5 引入了一系列新的 input 類型，以支持更多種類的數(shù)據(jù)輸入，比如電子郵件、日期等。

例子：電子郵件和網(wǎng)址輸入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>電子郵件和網(wǎng)址輸入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設(shè)置字體 */
            padding: 20px; /* 頁面內(nèi)邊距 */
        }

        form {
            max-width: 400px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內(nèi)邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標(biāo)簽獨占一行 */
            margin-bottom: 5px; /* 標(biāo)簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 輸入框?qū)挾?*/
            padding: 8px; /* 內(nèi)邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內(nèi)邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標(biāo)樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標(biāo)懸停時的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="email">電子郵件:</label>
    <input type="email" id="email" name="email" required>

    <label for="url">個人網(wǎng)站:</label>
    <input type="url" id="url" name="url">

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，我們使用了 type="email" 和 type="url" 來要求用戶輸入有效的電子郵件地址和網(wǎng)址。如果用戶輸入的不符合格式，瀏覽器會在提交表單前顯示一個警告。

2. 占位符屬性

placeholder 屬性允許我們在輸入字段中設(shè)置一個提示文本，當(dāng)輸入字段為空時顯示，一旦開始輸入，提示文本就會消失。

例子：帶占位符的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>帶占位符的輸入框示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設(shè)置字體 */
            padding: 20px; /* 頁面內(nèi)邊距 */
        }

        form {
            max-width: 300px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內(nèi)邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標(biāo)簽獨占一行 */
            margin-bottom: 10px; /* 標(biāo)簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="search"] {
            width: calc(100% - 22px); /* 輸入框?qū)挾龋瑴p去內(nèi)邊距和邊框的寬度 */
            padding: 10px; /* 內(nèi)邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
            box-sizing: border-box; /* 盒子模型，使寬度包含邊框和內(nèi)邊距 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內(nèi)邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標(biāo)樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標(biāo)懸停時的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="請輸入搜索關(guān)鍵字">

    <input type="submit" value="搜索">
</form>

</body>
</html>

這里的 placeholder="請輸入搜索關(guān)鍵字" 就是一個占位符，它會在用戶輸入之前顯示在搜索框中。

3. 自動聚焦屬性

autofocus 屬性可以讓頁面加載時自動將焦點放到某個表單元素上。

例子：自動聚焦的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自動聚焦的輸入框示例</title>
</head>
<body>

<form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" autofocus>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，當(dāng)頁面加載完成后，姓名輸入框?qū)⒆詣荧@得焦點。

4. 表單驗證

HTML5 為表單驗證提供了內(nèi)置支持，通過簡單的屬性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情況下進(jìn)行基本的驗證。

例子：表單驗證

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表單驗證示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* 包括邊框和內(nèi)邊距在內(nèi)的寬度 */
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>

<form>
    <label for="age">年齡:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>

    <label for="zipcode">郵編:</label>
    <input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="請輸入5位數(shù)字的郵編" required>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，年齡字段要求用戶輸入一個介于 18 到 99 之間的數(shù)字，而郵編字段要求用戶輸入一個符合特定模式（5位數(shù)字）的文本。

結(jié)語

HTML5 的表單增強功能大大簡化了表單處理和驗證的工作，使得開發(fā)更加高效，同時也提高了用戶體驗。通過上述示例，我們可以看到，利用 HTML5 的新特性，可以創(chuàng)建功能強大且易于使用的表單。隨著技術(shù)的不斷進(jìn)步，我們作為開發(fā)者應(yīng)該不斷學(xué)習(xí)和實踐，以便更好地利用這些新工具來構(gòu)建更好的網(wǎng)頁。

在線咨詢

上一篇：把HTML轉(zhuǎn)成PDF的4個方案及實現(xiàn)方法
下一篇：layui下拉菜單form.render局部刷新方法親測有效

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商