移动端流体布局[1]

2017年10月27日07:00:22 发表评论

本章主要开始如果通过第一个 PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局。

一.整体设计

首先,我们要了解一下测试工具。这里提供两种测试工具,一种是 Chrome 自带的移动端测试工具,另一种是 Opera Mobile 移动端测试工具。这里主要以 Chrome 为准,他模拟了主流的手机,并且引擎是 webkit。

首先,我们介绍一下分辨率,通过 Chrome 移动端测试工具可以得知,一般分辨率最小的不会小于 320 了,最大的不超过 640。这时有人会疑问,我的手机分辨率是一千多呢,为什么设计的时候还是 640 像素?比如 iphone6 plus 的分辨率为: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,minimum-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

上面最大最小比例其实就已经限制了无法缩放了, 和最后一个是否可以缩放有同样的功能。因为不同的手机,分辨率都不同,图片一定要能够自适应等比例缩放,才能保证布局的正确性。

//设置 max-width 后,图片开始自适应

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

注:本章为第52课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: