【转】响应式布局和自适应布局详解
响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。
自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小,但仍然也算做差异。它使得把握设计最终效果变得更难,同样让响应式布局更加的难以测试和预测。但同时说难,这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中,你也会因此更好的掌握一些基础知识。当然,要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的,但是你至少可以很轻松的确定它是能够正常工作的,因为页面的基本特性和布局结构都是根据语义结构来部署的。
响应式布局概念
Responsive design,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
经过不停地学习和实践,如今总结响应式设计的方法和注意点。其实很简单。
响应式设计的步骤
1. 设置 Meta 标签
大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>
标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
[1](user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 )
3. 通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px,那么可以这样写:
@media screen and (max-width: 980px) {#head { … }#content { … }#footer { … }
}
这里的样式就会覆盖上面已经定义好的样式。
4. 设置多种试图宽度
假如我们要设定兼容 iPad 和 iphone 的视图,那么可以这样设置:
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
恩,差不多就这样的一个原理。
一些注意的
1. 宽度需要使用百分比
例如这样:
#head { width: 100% } #content { width: 50%; }
2. 处理图片缩放的方法
- 简单的解决方法可以使用百分比,但这样不友好,会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了,就缩小。假如图片小了,就原尺寸输出。
img { width: auto; max-width: 100%; }
- 用
::before
和::after
伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情,在 css3 中,任何元素都可以使用 content 属性了,这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能: HTML结构:
<img src="data:image.jpg"data-src-600px="image-600px.jpg"data-src-800px="image-800px.jpg"alt="">
CSS 控制:
@media (min-device-width:600px) {img[data-src-600px] {content: attr(data-src-600px, url);}
}@media (min-device-width:800px) {img[data-src-800px] {content: attr(data-src-800px, url);}
}
3. 其他属性
例如 pre
,iframe
,video
等,都需要和img
一样控制好宽度。对于table
,建议不要增加 padding 属性,低分辨率下使用内容居中:
table th, table td { padding: 0 0; text-align: center; }以上内容和代码来自:掌心,感谢,欢迎查看我之前做过的响应式设计:查看演示
更多资源
Morten Hjerde和他的同事们对2005至2008年市场中的400余种移动设备进行了统计(查看报告),下图展示了大致的统计结果:
打造布局结构
我们可以监测页面布局随着不同的浏览环境而产生的变化,如果它们变的过窄过短或是过宽过长,则通过一个子级样式表来继承主样式表的设定,并专门针对某些布局结构进行样式覆写。我们来看下代码示例:
/* Default styles that will carry to the child style sheet */
html,body{background...font...color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Structural elements */
#wrapper{width: 80%;margin: 0 auto;background: #fff;padding: 20px;
}
#content{width: 54%;float: left;margin-right: 3%;
}
#sidebar-left{width: 20%;float: left;margin-right: 3%;
}
#sidebar-right{width: 20%;float: left;
}
下面的代码可以放在子级样式表Mobile.css中,专门针对移动设备进行样式覆写:
#wrapper{width: 90%;
}
#content{width: 100%;
}
#sidebar-left{width: 100%;clear: both;/* Additional styling for our new layout */border-top: 1px solid #ccc;margin-top: 20px;
}
#sidebar-right{width: 100%;clear: both;/* Additional styling for our new layout */border-top: 1px solid #ccc;margin-top: 20px;
}
大致的视觉效果如下图所示:
图中上半部分是大屏幕设备所显示的完整页面,下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下:
Media Queries
Ethan的文章中的“Meet the media query”部分有更多的范例及解释。更有效率的做法是,将多个media queries整合在一个样式表文件中
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ }
译文:流动网格
文章目录
原文:响应式布局和自适应布局详解 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/356.html)
【转】响应式布局和自适应布局详解相关推荐
- 浅谈响应式开发与自适应布局!
谈到响应式,大家不自觉的会想到什么? 首先映入眼帘的便是随着网页宽度变化而网页内容呈现出不同内容的效果!那么由来是什么呢? 2009时间段,互联网发生了一件天大的事情! 那就是在北京时间2009年6月 ...
- 响应式网站和自适应网站是怎么样区分的?
很长一段时间以来,都以为响应式网站就是自适应网站,这是两个一样的概念.后来机缘巧合认识了一位前端大拿,给我好好上了一课,终于能把这两种网站前端表现形式给讲透了.现摘录如下: 1.响应式网站由来 最开始 ...
- html自适应布局_三分钟学会响应式布局和自适应布局
响应式布局和自适应布局详解 响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局. 自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态.而在响应式布局中你却得考虑上百种不同的 ...
- CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍前端的 ...
- 静态布局、流式布局、自适应布局、弹性布局、响应式布局
静态布局.流式布局.自适应布局.弹性布局.响应式布局 前端的布局主要有: 静态布局.流式布局.自适应布局.弹性布局.响应式布局等. 一.静态布局: 尺寸上一律使用px;同时限制外层容器的大小:中间的宽 ...
- 响应式网格项目动画布局_响应式网格及其实际使用方式:常见的UI布局
响应式网格项目动画布局 重点 (Top highlight) 第二部分 (Part II) Now that you have a basic understanding of how to use ...
- CSS3实现的响应式字体:自适应视图窗口大小的新单位
这个是为了解决什么问题? 我最近在做一个项目.客户要求标题可以根据用户屏幕的尺寸而自动改变大小.我知道我通常用的相对字体单位(注* 如px, pt, em)只是相对于HTML根元素的大小而自动改变,而 ...
- php网站怎么做自适应,什么是自适应布局?自适应布局如何实现?
在前端布局中有一种布局叫自适应布局,那么,自适应布局是什么意思呢?自适应布局又如何实现?本篇文章将给大家来介绍自适应布局的意思以及自适应布局的实现方法. 首先我们来看什么是自适应布局? 所谓自适应布局 ...
- 响应式设计与自适应设计
响应式设计与自适应设计 相信从事前端页面设计的人都知道,页面呈现的效果及用户体验是非常重要的.当今社会移动设备的使用已超过了pc端,面对不同分辨率的设备,怎样做到页面体验的效果一样呢?这就成了最头疼的 ...
- UI设计中如何做响应式设计与自适应设计
UI设计中如何做响应式设计与自适应设计?由于科技在不断的发展,小伙伴们上网就不单单只依靠台式电脑了,还有平板电脑笔记本电脑都是可供大家选择的.面对不同的屏幕分辨率网站是如何进行适配的呢?今天AAA教育 ...
最新文章
- 优先队列的应用 C++实现
- 【Matlab数据的可视化】自适应绘图函数fplot
- 科技部部长:院士头衔不是学术不端挡箭牌、铁帽子!已有多位院士及候选人、校长、教授等被“拿下”...
- android的指纹问题
- python定义一个人类_Python类的定义、继承及类对象使用方法简明教程
- idea java gitignore,关于idea的gitignore文件编写及解决ignore文件不生效问题
- 1248. 统计「优美子数组」
- Python 基础 —— time(时间,日期)
- html 隐藏广告代码大全,JS广告代码_JS广告代码大全_js特效代码_js特效代码大全 - 懒人建站...
- Linux 操作系统基础知识总结
- smoothstep(),平滑阶梯函数,平滑过渡函数
- matlab函数coth,matlab函数
- c语言青蛙游戏,c语言:一只青蛙一次可以跳上1级台阶,也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法?...
- 深度学习环境配置(GPU、CPU版本)
- 论文阅读:FACIAL: Synthesizing Dynamic Talking Face with Implicit Attribute Learning
- TCGA 亚型突变负荷代码
- opencv-黑马程序员---Chapter1 opecv简介
- 基于git hooks的前端代码质量控制解决方案
- numpy_array函数
- mysql 1524_Debian/Ubuntu遇到MySQL错误ERROR 1524 (HY000):插件未加载的解决
热门文章
- 【雷达通信】基于mtatlab距离多普勒(RD)、CS、RM算法机载雷达成像【含Matlab源码 284期】
- 【疾病分类】基于matlab GUI模糊逻辑分类叶病严重程度分级系统【含Matlab源码 194期】
- java查询到更新之前的数据_java接口中查询数据为什么都不更新,ajax最后获取的数据还是和上次一样...
- 思维导图ubuntu_Ubuntu——思维导图导安装和configuration area错误
- torch.optim.lr_scheduler.MultiStepLR()用法研究 台阶/阶梯学习率
- hibernate java内存一次能取多少条_Hibernate性能测试(load10000条记录的简单测试 仅供参考)(转)...
- 软件项目验收汇报ppt_扔掉你收藏的PPT吧,设计院专用项目汇报模板来袭(68GB)!...
- c#二叉树 取叶子节点个数_「leetcode」222.完全二叉树的节点个数
- php打印上传错误信息,PHP上传文件错误信息说明
- webpack安装_初识webpack