第九十二节，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>