响应式设计-VS-REM布局

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

【目前几种布局】

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

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

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和移动端,如果足够耐心,效果完美

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

2.rem+js

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

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

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

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

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

【总结】

1.如果只做pc端

那么定宽度是最好的选择

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

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

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

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

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

【ps】

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

【最完美的是】

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

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

【更多】

更多精彩内容:uikoo9.com

时间: 2024-10-14 10:11:18

响应式设计-VS-REM布局的相关文章

响应式设计+ rem

特点:手机,ipad,PC 所有的终端设备上完美展示: 核心点: //PC端样式调整 @media screen and (max-width: 1024px){ } //平板的宽度 @media screen and (max-width: 980px){ } @media screen and (max-width:720px){ } @media screen and (max-width:640px){ } //手机端 @media screen and (max-width:320px

第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于设备宽度,布局viewport等于度量viewport <meta name="viewport" content="width=device-width,initial-scale=1"> [[布局]] [水平居中] 一.text-align和inline

自适应设计与响应式设计

目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念. 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本.这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度. 于是,很早就有人设想,能不能"一次设计,普遍适用"

学习响应式设计笔记

                       [email protected] Contents 1.?问题背景? 2.?什么是响应式设计和自适应设计有什么不同? 3.?如何创建响应式网站 4.?经典设计流程 5.?响应式网站的参照设计 1.?问题背景? 为不同分辨率的设备提供不同的网页,曾经的手机端与PC端分别维护一份代码,显得罗嗦,维护难,功能可能不统一等等. 只用一份代码,就可以在不同的设备上获得很好的显示效果. 每个设备都得到正确的设计 更少的工作 搜索优化 曾经手机端和PC端是两个不

响应式设计之媒介查询

你必须像水那样无形:当你把水倒进杯子中,水就变成了杯子的形状:当你把水倒进瓶子中,水就变成了瓶子的形状:当你把水倒进茶壶中,水就变成了茶壶的形状. - 李小龙 之前读<响应式Web设计实践>,这大概是我印象最深的一句话了.李小龙的功夫了得,可他的功夫哲学更是令人叹服.如今的前端,面临着更多的挑战,尺寸大小不一的设备涌现出来,就像形状各异的容器,而我们的网页必须像水一般, 能够接受各式各样的考验. 为了能够让同一个页面在不同尺寸的设备浏览器中呈现出与之适配的样式,CSS3引入了Media que

Web移动端页面 --响应式和动态REM

鄙人最近才刚刚开始学习一些关于移动端的知识,还只是个小白,文中可能有许多理解错误,望指出,请多多见谅. 响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐藏元素 添加meta viewport 明白手机端交互方式的区别 Media Query 是什么 Media query 翻译过来就是媒介查询,媒介就是我们查看这个网页的设备. 媒介查询源于CSS

响应式设计

响应式设计 响应式设计的概念(三要素) 流体网格 响应式图片 媒体查询 相关概念 分辨率 是指显示器所能显示的像素的多少 像素密度 dpi/ppi 每平方英寸的像素数 设备像素比 dip/dpr 类似于每像素包含的点数(dppx) 视网膜屏幕 屏幕显示异常清晰(设备像素比大于1) viewport 定义 可视区域 移动端: 布局视口(大部分980px) /理想视口(视口宽度=设备宽度) 设置 <meta name="viewport" content="width=de

第一章 响应式设计之Media Quer

书里谈到尽量不要使用Media Queriy. 但是过多使用media query,会导致CSS变得脆弱和页面难以维护.一些方法可以减少页面使用 media query. 响应式设计: (1) 使用百分比替换固定的宽度.如果不行,也尽量使用vw, vh, vmin, vmax. (2) 使用max-width,而不使用width. (3) 对于一些元素,如img, object, video, iframe, 使用max-width: 100%. (4) 如果背景图片要完全覆盖容器,可以使用ba

响应式设计三部曲

随着智能手机的流行,响应式网页设计无疑成为了如今网页设计的大趋势.对于新手来时,响应设计听起来有点复杂,但它实际上是比你想象的更简单.只需下面的3个步骤即可构建一个响应式的网页! 1.Meta Tag 大多数移动浏览器扩展的HTML页面到宽视口宽度,以便在屏幕上适合.您可以使用viewport meta标签来重设此.下面的视口标签告诉使用该设备的宽度视口宽度和禁用初始规模浏览器. <meta name="viewport" content="width=device-w