移動web開發一之流式佈局

使用開發工具webStorm,開發手機網頁。

1》流式佈局

<style>
    body{
        margin:0px;
        padding:0px;
    }
    div{
        margin: 0 auto;
        background: #b3d4fc;
        width:100%;
        height:900px;
    }
</style>

流式佈局要求居中，寬度自適應（寬度大小按百分比計算）。

百分比

2》viewport

1> 原網頁相當於拍攝的圖像，viewport相當於放置原網頁的底片，不同尺寸的移動設備相當於不同大小的相框

2>viewport有默認寬度，可以根據不同的顯示框的尺寸適配縮放

3> html中viewport的配置

<!--參數設置:   width:viewport的寬度，device-width表示移動設備的屏幕寬度
                initial-scale:縮放比例，1.0表示無縮放; 
                user-scalable:是否可縮放 0或no表示不能縮放，1或yes表示可以縮放-->
<meta  name="viewport" content="width=device-width,
 initial-scale=1.0,maximum-scale=1.5,minimum-scale=0.5 user-scalable=yes">

4>換行的問題

<p>hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,
    hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,
    hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,hahaha,
</p>

這樣的文本在移動設備顯示時，爲什麼會換行？

5>非標準的viewport配置

<meta  name="viewport" content=" initial-scale=0.5, user-scalable=no">

爲什麼init-scale=0.5?

像素：顯示圖像的點

分辨率：單位是px, 100px表示100個像素

尺寸：單位：英寸（=25.4mm）,指對角線長

一是對屏幕：顯示分別率，css的px是以這種顯示器的像素大小爲準。

二是對圖片：圖像顯示率，圖像大小的縮放，會導致圖像像素的縮放