什么是响应式布局
响应式布局(respond layout)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端(手机、平板、pc电脑、手表,电视) ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
为什么要有响应式布局?
-
在移动互联日益成熟的时候,在PC端开发的网页已经无法满足移动设备的要求。
-
通常的做法是针对移动端单独做一套特定的版本。
-
如果终端越来越多,那么需要开发的版本就会越来越多(大屏设备的普及)
-
响应式布局 :一个网站能够兼容多个终端(节约开发成本)
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
响应式开发现状:
-
如果已经存在PC的网站了,那么一般不会使用响应式开发,而是针对移动端再开发一套系统(比如京东、淘宝)
-
在新建站点 上采用响应式开发的越来越多。
-
在国内,响应式开发还不是特别的流行。但响应式开发是大势所趋,会越来越流行。
响应式开发与移动web开发的比较
开发方式 | 移动web开发+pc开发 | 响应式开发 |
---|---|---|
引用场景 | 一般已经有了PC端网站,只需要端独开发移动端网站即可 | 针对一些新建网站,并且要求适配移动端 |
开发 | 针对性强,开发效率高 | 兼容各种终端,效率低 |
适配 | 只能适配移动端或者PC端,pad上体验比较差 | 可以适配各种终端 |
效率 | 代码简洁,加载快 | 代码相对复杂,加载慢 |
REM
各种布局特征的对比
由于市面上手机种类繁多,导致移动端的屏幕种类非常的混乱,比如有常见的320px 360px 375px 384px 480px 640px
等。在开发中,美工一般只会提供750px或者是640px的设计稿,这就要求我们通过一张设计稿能够适配所有的屏幕。
通常解决方案如下:
-
流式布局:可以让各种屏幕都适配,只是在大屏幕中显示效果不是非常的友好, 即使这样, 由于开发效率高, 成本低, 目前使用流式布局的公司还是非常多的,比如 亚马逊 、京东 、携程
-
响应式布局:国内很少有大型网站使用,主要原因是工作大,可维护性不好 。所以一般都是中小型的门户或者博客类站点会采用响应式,因为这样可以节约成本。
rem是什么?
rem
(font size of the root element)是指相对于根元素
的字体大小的单位。它是一个相对单位。
em
(font size of the element)是指相对于当前元素的字体大小的单位。它也是一个相对单位。
html{
font-size:16px;
}
body {
font-size:20px;
}
div.em {
/*em的计算方式参照的当前元素的font-size,如果不设置,默认继承自父盒子*/
width:2em;
height:2em;
background-color:red;
}
/*rem的计算方式参照的是html的font-size*/
div.rem {
width:2rem;
height:2rem;
background-color:blue;
}
rem与响应式
因为rem的基准点是根元素html的字体大小,因此我们只需要设置不同屏幕的html的font-size大小不一样就可以达到不同屏幕的适配了。
rem与媒体查询
使用rem配合媒体查询可以适配多个终端
@media (min-width: 320px) {
html {
/*font-size: 100/750 * 320px*/
font-size: 42.67px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;;
}
}
优点:使用媒体查询适配,速度快。
缺点:适配多个终端时,需要添加响应的代码。
rem与javascript
通过javascript获取可视区的宽度,计算font-size的值,也可以适配多个终端。
var base = 100;
var design = 750;
function responsive() {
var pageWidth = window.innerWidth;
if ( pageWidth <= 320 ) {
pageWidth = 320;
}
if ( pageWidth >= 750 ) {
pageWidth = 750;
}
var size = base / design * pageWidth;
document.documentElement.style.fontSize = size + "px";
}
responsive();
window.addEventListener("resize", responsive);
优点:直接适配所有的终端
缺点:必须在页面加载之前设置html的font-size值,不然会出现文字大小调动的情况。