摘要:说到响应式布局方案,我们首先需要了解视口这个概念视口在早期的时候我们没有专门针对手机尺寸写的页面,所以在用手机浏览页面的时候我们看到的都是专门针对端的页面,在这种情况下页面会被严重压缩,而且会极大的影响页面的结构和布局,为了解决这个问题,苹
说到响应式布局方案,我们首先需要了解视口这个概念
视口在早期的时候我们没有专门针对手机尺寸写的页面,所以在用手机浏览页面的时候我们看到的都是专门针对PC端的页面,在这种情况下页面会被严重压缩,而且会极大的影响页面的结构和布局,为了解决这个 问题,苹果公司提出了视口的概念,因为我们早期的PC端的页面的版心一般是960px,为了容纳这个页面,我们在手机建立一个虚拟的区域,大小一般为980px,来容纳PC的页面,以方便用户来浏览页面
但是在如今移动端快速发展的时候,我们有了专门针对手机屏幕尺寸的的移动端页面,所以在写移动端的页面的时候我们需要调整视口的宽度,保证页面内容会在手机屏幕尺寸大小的页面上进行展示
媒体查询 媒体类型
媒体查询可以为不同的设备规定不同的样式,常用的一般有三种设备 screen(计算机屏幕,该值是默认值)、print(打印预览)、all(所有设备)
@media screen媒体属性
媒体属性用来规定在指定的符合某些条件的情况下为指定的元素设置样式,需要注意媒体属性必须用()包起来,否则无效,常用的媒体属性有
width 可视区域宽度,取值格式为指定宽度或者范围,如 @media (width: 900px){ }
height 可视区域高度,取值格式为指定宽度或者范围,如 @media (max-height: 900px){ }
device-width 设备宽度,取值格式为指定宽度或者范围,如 @media (max-device-width: 5000px) { }
device-height 设备高度 取值格式为指定宽度或者范围,如 @media (max-device-height: 5000px) { }
orientation 设备是竖屏还是横屏模式,可选值有landscape(横屏)、portrait(竖屏),如 @media (orientation: landscape) { }
aspect-ratio 可视区域宽高比,取值格式为水平像素/垂直像素,如@media (device-aspect-ratio:16/9) { }
device-aspect-ratio 设备宽高比,取值格式为水平像素/垂直像素,如@media (device-aspect-ratio:16/9) { }
例如我们要针对某个设备的body在横屏时设置的背景颜色是黑色,在竖屏的时候背景是白色,那么可以使用以下写法
html, body { height: 100%; } @media (orientation: landscape) { body{ background-color:#000; } } @media (orientation: portrait) { body{ background-color:#fff; } }逻辑操作符
媒体查询可以使用三种操作符,通过操作符配合媒体属性来判断是否载入媒体属性下的样式表
and 将每一个条件组合起来,只有当所有条件都成立时条件才成立,可以理解为JavaScript中的&
not 对媒体查询的条件取反
or 只要有一个媒体属性条件成立就成立,可以理解为JavaScript中的||
配合逻辑操作符设置设备在可视窗口大小变化时背景颜色发生改变
html,body{ height: 100%; } @media screen and (max-width: 500px ){ body{ background-color: skyblue; } } @media screen and (min-width: 501px) and (max-width: 800px){ body{ background-color: #ccc; } } @media screen and (min-width: 900px){ body{ background-color: yellowgreen; } }vw、vh布局方案
在CSS3规范中引入了vw、vh单位,分别将视口划分为100份,一个vw单位相当于视口宽度的1%,一个vh相当于视口高度的1%,需要注意的是不同于百分比的布局方案,vw和vh不受父元素宽高的影响,只由视口的大小决定
同时还有两个单位vmax、vmin,vmax表示取视口宽度和高度中比较大的值,将其等分为100份,vmin表示取比较小的值,将其等分为100份
vw、vh
目前浏览器的支持情况
rem布局rem是css中的一个单位,是根据根字体大小来设定的,也就是html的font-size
在正常的UI设计稿件的时候一般设置大小为640/750px大小,我们一般选择将稿件等分为20份(20份在设备大小和稿件大小一般可以除尽,我们尽量避免出现小数)
那么如果UI稿件为640px大小,每一份的大小为32px,假设UI稿件上有一个160*160大小的元素,那么该元素占整个页面的160/32份
同时我们也将屏幕分为20份,以Iphon为例(屏幕大小为320px),那么每份大小为16px,我们通过媒体查询将html根字体大小设置为16px,那么在UI稿件上160px大小的元素在Iphon5上的实际大小为160/32 rem,那么通过这个公式我们就可以通过JavaScript设置不同的根节点字体大小来进行适配
我们来写一个简单的例子
(function (doc, win) { var docEl = doc.documentElement, /* document.documentElement 返回文档的根节点 * orientationchange 在用户移动端设备屏幕垂直或水平旋转移动设备时被触发 * resize 事件,在绑定元素大小发生变化时触发该事件,例如检测屏幕变化: * window.addEventLisenter("resize",function(){ * alert("屏幕大小变化了") * }) * * resize 属性,css3新增属性,用来指定用户是否可以缩放该元素 * none:用户无法调整该元素尺寸 * both:用户可以调整元素的高度和宽度 * horizontal:用户可调整元素的宽度 * vertical:用户可调整元素的宽度 * */ resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", recalc = function () { var clientWidth = docEl.clientWidth; if (clientWidth >= 640) { clientWidth = 640 } if (!clientWidth) return; docEl.body.style.fontSize = (clientWidth / 640) * 100 + "px"; }; win.addEventListener("resizeEvt", recalc, false); /* * DOMContentLoaded 该事件会在load事件之前触发,在DOM树构建完成时就触发 * 而load事件则是在DOMContentLoaded事件触发之后,继续加载图片等外部文件完成后触发 * */ doc.addEventListener("DOMContentLoaded", recalc, false) })(document, window)
之前一直在使用手淘的rem布局方案,可以大概看一下源码
;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector("meta[name="viewport"]"); var flexibleEl = doc.querySelector("meta[name="flexible"]"); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) { var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/); }if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } else if (flexibleEl) { var content = flexibleEl.getAttribute("content"); if (content) { var initialDpr = content.match(/initial-dpr=([d.]+)/); var maximumDpr = content.match(/maximum-dpr=([d.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } //如果用户自定了name="viewport"的meat标签,那么通过match获取用户设置的initial-scale,也就是缩放级别,然后获得设置dpr //如果用户没有设定name="viewport"的meat标签,那么获取flexible.js自身定义的缩放级别来设置dpr if (!dpr && !scale) { //检测的当前设备的版本 var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; //window.devicePixelRatio 该属性返回当前显示设备的物理像素分辨率与css像素分辨率的比值 //可以通过重写window.devicePixelRatio来更改此属性,例如window.devicePixelRatio=2; if (isIPhone) { // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 其他设备下,仍旧使用1倍的方案 dpr = 1; } scale = 1 / dpr; } docEl.setAttribute("data-dpr", dpr); //判断页面是否存在 metaEl if (!metaEl) { metaEl = doc.createElement("meta"); metaEl.setAttribute("name", "viewport"); metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no"); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement("div"); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem(){ var width = docEl.getBoundingClientRect().width; //getBoundingClientRect //返回一个DOMRect对象,包含一组矩形的集合,该集合内是与该元素相关的css边框集合 // DOMRect // bottom:8 // height:8 // left:0 // right:520 // top:0 // width:520 // x:0 // y:0 if (width / dpr > 540) { width = 540 * dpr; } //手淘的布局方案默认将屏幕分成十份,当然,如果愿意我们可以对其进行更改 var rem = width / 10; docEl.style.fontSize = rem + "px"; flexible.rem = win.rem = rem; } // resize 在设备宽度发生改变时触发 win.addEventListener("resize", function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); //pageshow firefox/open的一个事件,在chrome中不会触发 //在页面后退时静态资源会直接重缓存中读取 win.addEventListener("pageshow", function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); //document.readyState 描述文档的加载状态 // loding 文档仍然在加载中 // interactive 文档已经加载完成并已经被解析,但是图像,框架之类的资源仍然在加载中 // complete 说有资源都已经加载完成,load事件即将被触发 // 在状态改变时document.readyState事件将被触发 if (doc.readyState === "complete") { doc.body.style.fontSize = 12 * dpr + "px"; } else { //DOMContentLoaded 在文档加载完成后触发,不会等待图像,框架等资源,参考$(function(){}) / $.ready() doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = 12 * dpr + "px"; }, false); } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; //rem 2 px 转化方法 flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem; if (typeof d === "string" && d.match(/rem$/)) { val += "px"; } return val; } //px 2 rem 转化方法 flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem; if (typeof d === "string" && d.match(/px$/)) { val += "rem"; } return val; } })(window, window["lib"] || (window["lib"] = {}));
手淘的布局方法主要是通过dpr来设置不同屏幕下的不同比例关系,drp指的是默认缩放为100%的情况下设备像素和CSS像素的比值
dpr=设备像素 / CSS像素
具体的关于dpr的解释可以看下面这篇文章
移动web开发之像素和DPR
如果使用手淘的布局方案注意一个问题,我们需要去除页面中设置了name=viewport的meta标签,在源码中我们可以看到如果存在改标签,那么lib-flexible不会动态改变缩放比例
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53674.html
摘要:优点在于响应式布局非常方便,都是按照比例进行的缩放,弊端是在于如果图片不规则,那么图片变形是难免的。一次布局多终端友好 技术开发和实际运营总是有很大差别的,比如常见的图片列表,一般设计图上都是固定尺寸大小的,但是实际操作起来并没有太多人去ps修剪图片到知道的尺寸,大部分都是差不多比例的图片就直接上传了,为了解决不规则图片列表展示问题有相应的解决方案例如瀑布流,或者相册等,但是对于多终端...
摘要:优点在于响应式布局非常方便,都是按照比例进行的缩放,弊端是在于如果图片不规则,那么图片变形是难免的。一次布局多终端友好 技术开发和实际运营总是有很大差别的,比如常见的图片列表,一般设计图上都是固定尺寸大小的,但是实际操作起来并没有太多人去ps修剪图片到知道的尺寸,大部分都是差不多比例的图片就直接上传了,为了解决不规则图片列表展示问题有相应的解决方案例如瀑布流,或者相册等,但是对于多终端...
摘要:做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。 做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解。 1. 什么是尺寸自适应 首先标题说的自适应,可能自适应在不同人眼里理解不同,特别与响应式的关...
阅读 1510·2021-11-23 09:51
阅读 1064·2021-10-12 10:12
阅读 2782·2021-09-22 16:06
阅读 3595·2019-08-30 15:56
阅读 3369·2019-08-30 15:53
阅读 3070·2019-08-29 16:29
阅读 2320·2019-08-29 15:27
阅读 1989·2019-08-26 10:49