第九十二節，html5+css3移動手機端流體佈局，開篇知識

時間 2019-11-12

標籤第九十二 html5+css3 html css 移動手機流體佈局開篇知識欄目 HTML5 简体版

原文原文鏈接

html5+css3移動手機端流體佈局，開篇知識css

將項目設計成移動端可訪問的頁面，項目採用的是流體佈局。也就是寬度以百分比自適應的，由於手機的屏幕大小不一致 html

一．總體設計html5

首先咱們要了解一下測試工具。這裏提供兩種測試工具一種是Chrome自帶的移動端測試工具另外一種是OperaMobile移動端測試工具。這裏主要以Chrome爲準他模擬了主流的手機，而且引擎是webkit，首先咱們介紹一下分辨率經過Chrome移動端測試工具能夠得知通常分辨率最小的不會小於320了最大的不超過640。這時有人會疑問個人手機分辨率是一千多呢爲何設計的時候仍是640像素？好比iphone6plus的分辨率爲：1080x1920(有一些設計者稱實際分辨率：1242 x 2208)，而它的邏輯分辨率爲：414x736。沒有超過640，經過頁面縮放技術進行縮小而不會失真。而若是是ipad，分辨率爲：1563x2048，而它的邏輯分辨率則爲768x1024，因此，若是設置640的頁面，會在豎屏出現白邊。其次咱們看下典型的兩種設計一種是全屏流體設計另外一種是固屏流體設計。下面css3

有幾個表明網站：web

全屏類：瀏覽器

1.騰訊新聞：http://xw.qq.com/iphone

2.途牛旅遊：http://m.tuniu.com/工具

固屏類：佈局

1.京東商城：http://m.jd.com/測試

2.淘寶網：http://m.taobao.com/

若是隻是兼容移動手機端那麼無論是固屏仍是全屏都是同樣。從設計難度上來講固屏貌似更容易一點點由於全屏設計在電腦上設計徹底放大又失真設計起來比較難受，咱們這裏推薦使用固屏。固然全屏設計在PC端和PAD平板也能夠無縫瀏覽但圖片卻會失真。固屏雖然會留有白邊但圖片不會失真。再固然用了PAD或PC端爲何卻訪問用手機網頁呢？除了設計師，還有誰會去這麼作？因此，不必。

咱們的案例仍是瓢城旅行社只不過在頭部導航部分使用了全屏其餘部位使用固屏幕。測試了大部分機型和手持設備瀏覽器都能正常訪問。但不排除又個別機型或瀏覽器可能有錯位現象。

二．必要知識

禁止網頁縮放，保證字體在手機端的大小和清晰度

作移動站有一個必要的知識就是關於屏幕寬度以及縮放問題。咱們習慣性的在<head> 標籤之間增長一個<meta>標籤：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 在網頁頭部加上這段解決縮放問題

說明：

窗口設定

name="viewport"

頁面大小屏幕等寬

width=device-width

初始縮放比例 1.0表示原始比例大小

initial-scale=1.0

容許縮放的最小比例

minimum-scale=1.0

容許縮放的最大比例

maximum-scale=1.0

用戶是否能夠縮放，這裏no表示不能夠

user-scalable=no

圖片自適應

保證小於圖片分辨率的手機，自適應等寬屏幕

圖片必定要可以自適應等比例縮放才能保證佈局的正確性。

方法：將圖片的img標籤轉換成區塊，將最大寬度設置爲100%，這樣圖片就會自適應了

        img{
            display: block;
            max-width: 100%;
        }

最終效果

能夠看到，圖片已經自適應縮小，並且字體沒有縮放，很清晰

html+css代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--自適應手機，禁止縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>瓢城旅行社</title>
    <!--<link rel="stylesheet" href="css/index.css">-->
    <style type="text/css">
        img{
            display: block;
            max-width: 100%;
        }
    </style>
</head>
<body>
<!--圖片自適應-->
<img src="img/tour1.jpg">
1111
</body>