html5+css3移动手机端流体布局，开篇知识

将项目设计成移动端可访问的页面，项目采用的是流体布局。也就是宽度以百分比自适应的，因为手机的屏幕大小不一致 

一．整体设计

    首先 我们要了解一下测试工具。这里提供两种测试工具 一种是Chrome自带的移动端测试工具 另一种是OperaMobile移动端测试工具。这里主要以Chrome为准 他模拟了主流的手机，并且引擎是webkit，首先 我们介绍一下分辨率 通过Chrome移动端测试工具可以得知 一般分辨率最小的不会小于320了 最大的不超过640。这时有人会疑问 我的手机分辨率是一千多呢 为什么设计的时候还是640像素？比如iphone6plus的分辨率为：1080x1920(有一些设计者称实际分辨率：1242 x 2208)，而它的逻辑分辨率为：414x736。没有超过640，通过页面缩放技术进行缩小而不会失真。而如果是ipad，分辨率为：1563x2048，而它的逻辑分辨率则为768x1024，所以，如果设置640的页面，会在竖屏出现白边。其次 我们看下典型的两种设计 一种是全屏流体设计 另一种是固屏流体设计。下面

有几个代表网站：

    全屏类：

        1.腾讯新闻：http://xw.qq.com/

        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>

 

第九十二节，html5+css3移动手机端流体布局，开篇知识的更多相关文章

  1. 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...

  2. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  3. 前端切图:手机端自适应布局demo

    手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...

  4. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  5. HTML5/CSS3 第三章页面布局

    页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...

  6. （淘宝无限适配）手机端rem布局详解（转载非原创）

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  7. （淘宝无限适配）手机端rem布局详解

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  8. 移动端适配（手机端rem布局详解）

    1. 问题的引出 如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10 ...

  9. 手机端sticker布局，底部按钮在屏幕底部

    <template> <div class="product-detail-container"> <div class="detail&q ...

随机推荐

  1. SAP CRM 为用户创建业务合作伙伴并分配到组织单位

    想要在SAP CRM的前台完成一些操作,需要登录的用户在系统中存在对应的业务合作伙伴才可以,某些情况下,还需要被分配到正确的公司.部门.职位.下面是相关的操作步骤. 本文假定读者已经拥有一个开发帐号. ...

  2. Spring IOC的理解

            学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理 ...

  3. 使用Asponse.Cell解决Excel科学计数法问题

    //fileName --文件路径 public DataSet DataSetGetDataFromExcel(string fileName) { DataSet dataset = new Da ...

  4. owa_outlook暴力破解脚本

    其实msf里面存在这样的模块,search owa 即可,字典这种东西还是找规律密码去破解比较好 然后担心遇到渗透测试没有msf情况下,还是得自己写个脚本,网上找了一下lijiejie,但是运行不了, ...

  5. Ubuntu安装Python机器学习包

    1.安装pip $ mkdir ~/.pip $ vi ~/.pip/pip.conf [global] trusted-host=mirrors.aliyun.com index-url=http: ...

  6. 使用pycharm+pyqt5 触发自定义方法

    1.依旧使用上次QtDesigner做的界面,如下图: 2.本次的使用text Browser 和 text Edit 和 pushButton控件做触发联系: 3.目的实现在text Edit中随意 ...

  7. 自动生成 Makefile (automake/autoconf 入门)

    作为Linux 下的程序开发人员,大家一定都遇到过Makefile ,用make 命令来编译自己写的程序确实是很方便.一般情况下,大家都是手工写一个简单Makefile ,如果要想写出一个符合自由软件 ...

  8. C#删除只读文件或文件夹(解决File.Delete无法删除文件)

    引用: http://www.jb51.net/article/72181.htm   C#删除只读文件的方法: if (File.GetAttributes(FFName).ToString().I ...

  9. Hihocode 1015 KMP算法

    时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程的学习道路上一同前进. ...

  10. 【Loadrunner】初学Loadrunner——场景设计

    在使用Loadrunner的时候,常常需要使用到场景设计.但是怎么设计一个满意的场景?如何开展? 首先可以点击tools > Create Controller Scenario > OK ...