到底什么是响应式布局
来源:互联网 发布:淘宝大学需要多少学费 编辑:程序博客网 时间:2024/06/15 14:36
做移动端的前端,接到的需求中肯定离不开响应式布局,那么到底什么是响应式布局,其实现的原理在哪,我个人的看法如下:
1.目的:在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够适配多个终端
2.由于响应式布局多是针对移动端,所以首先要在<head>标签中添加下面这行代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面
3.宽度百分比,也就是所谓的流式布局,用法很简单,但缺点是显示出来的一些页面元素宽度被拉的很长,但是高度还是和原来一样,所以看起来非常的不协调
4.媒体查询,即针对不同的屏幕尺寸设置不同的样式,它告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写:
@media only screen and (max-width:980px){ #head { … } #content { … } #footer { … } }
或者
<link rel="stylesheet" href="style.css" media="only screen and (max-width:980px)"/>
如果兼容的终端类型多了,就要多写几个@media或者引入多个<link/>标签
5.rem,通过根元素进行适配的(只参照<html>中的font-size,和<body>没有任何关系),这主要是针对响应式字体,可以写成:
@media only screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}@media only screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}@media only screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}@media only screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}@media only screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}@media only screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}@media only screen and (min-width:800px){html{font-size:25px}}
注意:上面是先统计自己网站有哪些主流的屏幕设备,然后去针对那些设备去做media query设置
6.完全适配,如果要所有设备分辨率都能兼容适配,可以通过JS去动态计算根元素的font-size,代码如下:
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; console.log($("html").css("font-size")); }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
注意:我所在公司的UI给的是750宽度的设计图,所以在该屏幕尺寸下的根元素的font-size是100px,然后直接将设计图中具体部位的尺寸大小除以100就可以得到对应的rem值,即完成了从px到rem的换算;
如果现在的屏幕尺寸是375(iphone 6),是750的一半,也就是说,设计图里指定宽度为200px(对应的width值为2rem)的地方,现在放在iphone 6上就显示为100px,但对应的width值还是2rem,所以只需要给该元素添加width:2rem,就实现了宽度的全适配
7.背景图片,具体请参考background-size这个新属性
- 到底什么是响应式布局
- 到底什么是响应式布局,响应式布局如何去写
- 什么是响应式布局?
- 什么是响应式布局?以及响应式布局的有缺第
- 响应式布局到底有什么特点?用来干什么? 与html5有什么关系?
- 什么是响应式设计
- 什么是响应式设计
- [响应式布局]响应式布局技巧
- 响应式布局入门
- 响应式布局原理
- 响应式布局入门
- 响应式布局入门
- 响应式布局入门
- 浅谈响应式布局
- 响应式布局
- 响应式布局
- 浅谈响应式布局
- 实现响应式布局
- 高级编程之高级IO续篇
- Solr-----10、Solr内置fieldType类型
- msql安装之后不能启动
- 8 overview of synaptic transmission
- 三天上手PHP之2:变量
- 到底什么是响应式布局
- 《Selective Search for object recognition》阅读笔记
- hdu 2048 递推&&错排
- AJAX
- @Responsebody与@RequestBody
- 洛谷 P1312 Mayan游戏
- POJ1324(Astar)
- 水池数目
- Struts2执行流程/配置文件加载顺序/架构相关描述