移动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是以这种显示器的像素大小为准。

二是对图片：图像显示率，图像大小的缩放，会导致图像像素的缩放