文档章节

响应式设计-VS-REM布局

robotxq
 robotxq
发布于 2017/07/09 12:33
字数 1059
阅读 27
收藏 0

@REM布局 

水平有限,不对之处还请指出。

1401418515.jpeg

 

【目前几种布局】

随着移动互联网的发展和微信的突起,移动端的响应式布局越来越重要了。

目前网站布局有以下几种:

1.定宽度布局

很多pc的网站都是定宽度布局的,也就是设置了min-width,

这样一来,如果小于这个宽度就会出现滚动条,

如果大于这个宽度则内容居中外加背景,

这种设计常见与pc端。

2.响应式布局

所谓响应式布局就是流式布局+媒体查询,

流式布局用来解决不同宽度的布局问题,

外加媒体查询,可以调整布局,例如大屏幕是布局1,小屏幕是布局2,

这种布局通吃pc和移动端,做到精细处,两者的效果都很好,

缺点是媒体查询是有限的,也就是可以枚举出来的,

只能适应主流的宽高。

3.rem布局

近期出现rem布局,参考:http://isux.tencent.com/web-app-rem.html

原理是,先按定高宽设计出来页面,然后转换为rem单位,

配合js查询屏幕大小来改变html的font-size,

最终做出所谓的完美自适应。

 

【rem缺点】

rem一出好像所有移动端自适应不采用rem都很low一样,

来分析分析,

假设以100x100做出网页,

那么采用rem+js完全可以自适应所有200x200,300x300,450x450等等高宽,

 

问题来了,

如果用100x100设计好后,

来了100x200,100x300,100x400的手机,

那么效果无非两种:

1.网页内容只局限与网页顶部,例如100x400的手机,网页内容只占用的100x100的部分,

2.有人说可以高度也js+rem,那么效果无非是拉伸或者缩放

 

【不要抬杠】

有人会说了,现实中不会有100x400的手机,

我想说的是这种rem+js只不过是宽度自适应,

高度没有做到自适应,一些对高度,或者元素见间距要求比较高的设计,

那这种布局没有太大的意义。

如果只是宽度自适应,那我更推荐的是响应式设计。

 

【响应式 vs rem】

1.响应式

随便找一个响应式的网站:http://www.golaravel.com/

改变浏览器宽度,你会发现“布局”会随之变化,不是一成不变的,

例如导航栏在大屏幕下是横排,在小屏幕下是竖排,在超小屏幕下隐藏为菜单,

也就是说如果有足够的耐心,在每一种屏幕下都应该有合理的布局,完美的效果。

优点:适应pc和移动端,如果足够耐心,效果完美

缺点:要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本

附图:

1.png

2.png

2.rem+js

找了腾讯那篇文章的示例:http://121.40.99.17/global/rem-phone.html

改变浏览器宽度,你会发现,页面所有元素的高宽都等比例缩放,

也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了。。

优点:理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。

缺点:碰到重视高度的设计,或者重视元素间间距的设计,那就玩不开了。

附图:

3.png

4.png

 

【总结】

1.如果只做pc端

那么定宽度是最好的选择

2.如果做移动端,且设计对高度要求不高

那么rem+js是最好的选择,一份css+一份js调节font-size搞定

3.如果pc,移动要兼容,而且要求很高

那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,

响应式根据媒体查询做不同的布局。

 

【ps】

还有一种rem+媒体查询,和rem+js一对比感觉有点鸡肋就没有提及。

 

【最完美的是】

随着移动端的风行,最完美的是:

响应式布局+多版本设计+足够的耐心

 

【更多】

更多精彩内容:uikoo9.com

© 著作权归作者所有

robotxq
粉丝 0
博文 1
码字总数 1059
作品 0
私信 提问
布局的几种方式(静态布局、自适应布局、流式布局、响应式布局、弹性布局)

一、静态布局 页上的所有元素的尺寸一律使用px作为单位 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。 常规的pc的网站都是静态(定宽度)布局的,也就是...

神秘者007
2018/10/31
0
0
移动端自适应布局&微信小程序rpx

rpx是微信小程序推出的一个新单位,通过rpx可以让我们的页面根据屏幕宽度进行自适应,这一举措解决了一直令前端头疼的屏幕适配问题。 而在rpx出现之前,web页面的自适应布局已经有前人总结了...

小草先森
2018/06/16
0
0
CSS_相对单位rem

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之...

喵王不瞌睡
2016/03/18
73
0
rem是如何实现自适应布局的?

摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。 rem这是个低调的css单位,近一两年开始崭露...

临江仙卜算子
2018/06/29
0
0
前端响应式布局原理与方案(详细版)

引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是比较重。下面是博客网站对不同...

八叉树
04/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

C 语言 二级指针的使用

#include <stdio.h>#include <stdlib.h>typedef struct node Node;struct node {int data;struct node* next;struct node* prev;};Node head;Node* insert(Node......

小张525
41分钟前
2
0
【大数据技术】——Hadoop(1)

什么是大数据 基本概念 《数据处理》 在互联网技术发展到现今阶段,大量日常、工作等事务产生的数据都已经信息化,人类产生的数据量相比以前有了爆炸式的增长,以前的传统的数据处理技术已经...

须臾之余
55分钟前
7
0
比特币从地址逆向计算私钥

区块链 区块链简介 说到比特币,就不得不提区块链。那什么是区块链呢? 区块链本质是一个数据集,只不过数据的组织采用了比较特殊的方式,就是把数据拆分为一块一块的小数据集。 为什么要进行...

trayvon
今天
1
0
TypeScript……真香

写前端或者用 node 写命令行小工具一直采用的 es6 的语法,对于 TypeScript 则是秉持敬而远之的态度,毕竟团队中多推广一门语言所需要花费的精力都是让人望而却步的。所以对于 JavaScript 的...

郁也风
今天
3
0
shell基本案例

1、自定义rm linux系统的rm命令太危险,一不小心就会删除掉系统文件。 写一个shell脚本来替换系统的rm命令,要求当删除一个文件或者目录时,都要做一个备份,然后再删除。下面分两种情况,做...

寰宇01
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部