屏幕适配

 

rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。·

为什么web app要使用rem?

这里我特别强调web app,web page就不能使用rem吗,其实也当然可以,不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力,接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。

1、实现强大的屏幕适配布局:

最近iphone6一下出了两款尺寸的手机,导致的移动端的屏幕种类更加的混乱,记得一两年前做web app有一种做法是以320宽度为标准去做适配,超过320的大小还是以320的规格去展示,这种实现方式以淘宝web app为代表作,但是近期手机淘宝首页进行了改版,采用了rem这个单位,首页以内依旧是和以前一样各种混乱,有定死宽度的页面,也有那种流式布局的页面。

我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局、限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法。

例如流式布局的解决方案有不少弊端,它虽然可以让各种屏幕都适配,但是显示的效果极其的不好,因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果,但是目前行业里用流式布局切web app的公司还是挺多的,看看下面我收集的一些案例:

1.亚马逊:

1418896965

2.携程:

1418891322

3.兰亭

原文来自http://caibaojian.com/web-app-rem.html

上面的网站都是采用的流式布局的技术实现的,他们在页面布局的时候都是通过百分比来定义宽度,但是高度大都是用px来固定住,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度还是和原来一样,实际显示非常的不协调,这就是流式布局的最致命的缺点,往往只有几个尺寸的手机下看到的效果是令人满意的,其实很多视觉设计师应该无法接受这种效果,因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。

流式布局并不是最理想的实现方式,通过大量的百分比布局,会经常出现许多兼容性的问题,还有就是对设计有很多的限制,因为他们在设计之初就需要考虑流式布局对元素造成的影响,只能设计横向拉伸的元素布局,设计的时候存在很多局限性。

2.固定宽度做法

还有一种是固定页面宽度的做法,早期有些网站把页面设置成320的宽度,超出部分留白,这样做视觉,前端都挺开心,视觉在也不用被流式布局限制自己的设计灵感了,前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题,例如在大屏幕手机下两边是留白的,还有一个就是大屏幕手机下看起来页面会特别小,操作的按钮也很小,手机淘宝首页起初是这么做的,但近期改版了,采用了rem。

3.响应式做法

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做,主要原因是工作大,维护性难,所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位,因为这样反而可以节约成本,不用再专门为自己的网站做一个web app的版本。

4.设置viewport进行缩放

天猫的web app的首页就是采用这种方式去做的,以320宽度为基准,进行缩放,最大缩放为320*1.3 = 416,基本缩放到416都就可以兼容iphone6 plus的屏幕了,这个方法简单粗暴,又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效,不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

rem能等比例适配所有屏幕

上面讲了一大堆目前大部分公司主流的一些web app的适配解决方案,接下来讲下rem是如何工作的。

上面说过rem是通过根元素进行适配的,网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子:

html{font-size:20px;
}
.btn {width: 6rem;height: 3rem;line-height: 3rem;font-size: 1.2rem;display: inline-block;background: #06c;color: #fff;border-radius: .5rem;text-decoration: none;text-align: center;    
}

Demo 上面代码结果按钮大小如下图:

1418899506

我把html设置成10px是为了方便我们计算,为什么6rem等于60px。如果这个时候我们的.btn的样式不变,我们再改变html的font-size的值,看看按钮发生上面变化:

//code from http://caibaojian.com/web-app-rem.html
html{font-size:40px;
}

Demo

按钮大小结果如下:

1418898055

上面的width,height变成了上面结果的两倍,我们只改变了html的font-size,但.btn样式的width,height的rem设置的属性不变的情况下就改变了按钮在web中的大小。

其实从上面两个案例中我们就可以计算出1px多少rem:

第一个例子:

120px = 6rem * 20px(根元素设置大值)

第二个例子:

240px = 6rem * 40px(根元素设置大值)

推算出:

10px  = 1rem 在根元素(font-size = 10px的时候);

20px  = 1rem 在根元素(font-size = 20px的时候);

40px  = 1rem 在根元素(font-size = 40px的时候);

在上面两个例子中我们发现第一个案例按钮是等比例放大到第二个按钮,html font-size的改变就会导致按钮的大小发生改变,我们并不需要改变先前给按钮设置的宽度和高度,其实这就是我们最想看到的,为什么这么说?接下来我们再来看一个例子:

Demo

1418873132

由上面两个的demo中我们知道改变html的font-size可以等比改变所有用了rem单位的元素,所以大家可以通过chrome浏览器的调试工具去切换第三个的demo在不同设备下的展示效果,或者通过缩放浏览器的宽度来查看效果,我们可以看到不管在任何分辨率下,页面的排版都是按照等比例进行切换,并且布局没有乱。我只是通过一段js根据浏览器当前的分辨率改变font-size的值,就简单的实现了上面的效果,页面的所有元素都不需要进行任何改变。

到这里肯定有很多人会问我是怎么计算出不同分辨率下font-size的值?

首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给我的前提下,(当然这个尺寸肯定不一定是640,可以是320,或者480,又或是375)来看一组表格。

1418903956

上面的表格蓝色一列是Demo3中页面的尺寸,页面是以640的宽度去切的,怎么计算不同宽度下font-site的值,大家看表格上面的数值变化应该能明白。举个例子:384/640 = 0.6,384是640的0.6倍,所以384页面宽度下的font-size也等于它的0.6倍,这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

Demo3中我是通过JS去动态计算根元素的font-size,这样的好处是所有设备分辨率都能兼容适配,淘宝首页目前就是用的JS计算。但其实不用JS我们也可以做适配,一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备,然后去针对那些设备去做media query设置也可以实现适配,例如下面这样:

html {font-size : 20px;
}
@media only screen and (min-width: 401px){html {font-size: 25px !important;}
}
@media only screen and (min-width: 428px){html {font-size: 26.75px !important;}
}
@media only screen and (min-width: 481px){html {font-size: 30px !important; }
}
@media only screen and (min-width: 569px){html {font-size: 35px !important; }
}
@media only screen and (min-width: 641px){html {font-size: 40px !important; }
}

上面的做的设置当然是不能所有设备全适配,但是用JS是可以实现全适配。具体用哪个就要根据自己的实际工作场景去定了。

下面推荐两个国内用了rem技术的移动站,大家可以上去参考看看他们的做法,手机淘宝目前只有首页用了rem,淘宝native app的首页是内嵌的web app首页。

淘宝首页:m.taobao.com

D X:m.dx.com

最后我们再来看一看他的兼容性:

1418894538

在线工具

@blinkcat,rem是可以合并雪碧图的,viewport设置确实简洁,但是过于粗暴,全局都进行缩放,有时候我布局并不希望全局缩放,部分布局希望不用缩放,所以使用rem,不过具体使用什么方法大家都可以根据实际情况衡量。并不是每个人都喜欢使用sass,所以在px转rem这块我做了一个在线转换工具:http://520ued.com/tools/rem

REM自适应JS

具体使用方法请参考这篇文章:Rem精简版实现自适应-优化flexible.js

//designWidth:设计稿的实际宽度值,需要根据实际设置
//maxWidth:制作稿的最大宽度值,需要根据实际设置
//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
;(function(designWidth, maxWidth) {var doc = document,win = window,docEl = doc.documentElement,remStyle = document.createElement("style"),tid;function refreshRem() {var width = docEl.getBoundingClientRect().width;maxWidth = maxWidth || 540;width>maxWidth && (width=maxWidth);var rem = width * 100 / designWidth;remStyle.innerHTML = 'html{font-size:'   rem   'px;}';}if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(remStyle);} else {var wrap = doc.createElement("div");wrap.appendChild(remStyle);doc.write(wrap.innerHTML);wrap = null;}//要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;refreshRem();win.addEventListener("resize", function() {clearTimeout(tid); //防止执行两次tid = setTimeout(refreshRem, 300);}, false);win.addEventListener("pageshow", function(e) {if (e.persisted) { // 浏览器后退的时候重新计算clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === "complete") {doc.body.style.fontSize = "16px";} else {doc.addEventListener("DOMContentLoaded", function(e) {doc.body.style.fontSize = "16px";}, false);}
})(750, 750);


来源:前端开发博客

本文转载于:猿2048➝https://www.mk2048.com/blog/blog.php?id=j00ai1j&title=屏幕适配

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【存储过程】MySQL存储过程/存储过程与自定义函数的区别

---------------------------存储过程-------------------- 语法: 创建存储过程: CREATE [definer {user|current_user}] PROCEDURE sp_name ([ proc_parameter [,proc_parameter ...]]) [ characteristics..] routime_body 其中: proc_parameter : [IN|OUT|INOUT] parameter_…

Java死锁故障排除和解决

JavaOne年度会议的一大优点是&#xff0c;主题专家介绍了几个技术和故障排除实验室。 其中的一个实验室今年特别吸引了我的注意力&#xff1a;“ HOL6500-查找和解决Java死锁 ”&#xff0c;由Java冠军Heinz Kabutz提出 。 这是我在该主题上看到的最好的演示之一。 我建议您自己…

3. HTML中的容器标签

什么是容器标签&#xff1f;在HTML开发中我们常常会使用一类标签作为容器放置一些内容&#xff0c;我们把这类标签称之为容器标签&#xff0c;可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签&#xff0c;在这里我们就来总结下这些内容。 列表标签 1 <!-- 无…

GitHub上Java的Bloom Bloom实现

布隆过滤器是集数据结构的一种 。 对于那些不了解的对象&#xff0c;“设置数据结构”仅包含一个主要方法。 它仅用于确定特定元素是否包含在一组元素中。 大多数数据结构&#xff08;例如Hash Map &#xff0c; Linked List或Array &#xff09;都可以相当轻松地创建此函数。 …

ni软件管理器_NI 技术支持丨我的 NI 硬件设备不能被识别,怎么办?Windows

这篇指南可以帮助您解决在您的 Windows 系统上无法识别您的 NI 硬件有关的问题。症状包括以下几种情况&#xff1a;连接至 USB 端口时&#xff0c;硬件上的 LED 灯不亮/不闪烁。连接至 USB 后已连接设备的 LED 灯持续闪烁。仅限音频接口&#xff1a;该设备在音频应用程序或 Win…

在Java应用程序中使用密码学

这篇文章描述了如何使用Java密码体系结构 &#xff08;JCA&#xff09;&#xff0c;该体系结构使您可以在应用程序中使用密码服务。 Java密码体系结构服务 JCA提供了许多加密服务&#xff0c;例如消息摘要和签名 。 这些服务可以通过特定于服务的API来访问&#xff0c;例如Me…

CSS学习笔记-04 a标签-导航练习

个人练习&#xff0c;各位大神勿笑 。。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&qu…

深度学习loss值变为0_利用TensorFlow2.0为胆固醇、血脂、血压数据构建时序深度学习模型(python源代码)...

背景数据描述胆固醇、高血脂、高血压是压在广大中年男性头上的三座大山&#xff0c;如何有效的监控他们&#xff0c;做到早发现、早预防、早治疗尤为关键&#xff0c;趁着这个假期我就利用TF2.0构建了一套时序预测模型&#xff0c;一来是可以帮我预发疾病&#xff0c;二来也可以…

在Spring MVC Web应用程序中使用reCaptcha

CAPTCHA是一种程序&#xff0c;可以生成人类可以通过的测试并对其进行评分&#xff0c;而计算机程序“ 不能 ”通过。 所采取的策略之一是向用户显示具有扭曲文本的图像&#xff0c;并且用户应在输入区域中书写文本。 如果显示的文字与用户输入的文字相同&#xff0c;则我们可以…

课时109.外边距合并现象(掌握)

我们先写一个案例&#xff0c;通过案例来了解 它们之间的水平距离就是两个间距的和 我们看完水平再来看垂直方向 在默认布局的垂直方向上&#xff0c;默认情况下外边距是不会叠加的&#xff0c;会出现合并现象&#xff0c;谁的外边距比较大就听谁的 本文转载于:猿2048➜https:…

纯 CSS实现三角形

最近项目上做评论回复&#xff0c;设计师提高交互性特意设计了小三角&#xff0c;如下&#xff1a; 下面介绍一下实现效果的css方法&#xff1a; 1.border 通过设置上下左右border宽度来实现。 首先查看一下全部设置的效果&#xff1a; <style>   .triangle{     w…

Spring MVC表单验证(带批注)

这篇文章提供了一个简单HTML表单验证示例。 它基于带有注释的Spring MVC示例。 该代码可在GitHub的Spring-MVC-Form-Validation目录中找到。 数据 在此示例中&#xff0c;我们将使用bean和JSR303验证批注&#xff1a; public class MyUser {NotNullSize(min1,max20)private …

课时106.边框练习(理解)

让我们做出来如下的样式&#xff1a; 1.首先看下有几个边框&#xff0c;就做几个div&#xff0c;用简单方法div.box$*6 tab键 2.然后给它们设置宽高 3.然后依此来做边框 第一个&#xff1a;有四种方法&#xff0c;第一种最简单 第二个&#xff1a;有两种方法&#xff0c;第二…

课时105.边框属性下(掌握)

2.3连写&#xff08;分别设置四条边的边框&#xff09; border-width:上 右 下 左; border-style:上 右 下 左; border-color:上 右 下 左; 注意点&#xff1a; 1.这三个属性的取值是按顺时针来赋值的 也就是按照上右下左来赋值&#xff0c;而不是按照日常生活…

新mac 下第一次 安装 mongodb 步骤

新入手mac&#xff0c;安装mongo步骤记录&#xff1a;不建议使用网上的brew安装方法&#xff0c;因为试了半天没有成功&#xff0c;应该是新版本限制比较多&#xff01; 从mongodb官网下载mac版本mongo&#xff1a; 1.访问MongoDB官方下载地址 http://www.mongodb.org/download…

201621123065《JAVA程序设计》第11周学习总结

1. 本周学习总结 2. 书面作业 1. 源代码阅读&#xff1a;多线程程序BounceThread 1.1 BallRunnable类有什么用&#xff1f;为什么代码中需要调用Thread.sleep进行休眠&#xff1f; BallRunnable类实现Runnable接口&#xff0c;支持多线程&#xff1b;调用Thread.sleep进行休眠则…

vue使用v-for循环,动态修改element-ui的el-switch

在使用element-ui的el-switch中&#xff0c;因为要用v-for循环&#xff0c;一直没有成功&#xff0c;后来仔细查看文档&#xff0c;发现可以这样写 <el-switch v-for"(item, key) in list" v-model"item.is" :key"key" :active-value"…

前端加按钮将图片另存为_Windows 10系统如何将自己的照片制作成文件夹图标

我们大家都在电脑上建有很多文件夹&#xff0c;有时候查找自己需要的资料文件夹时不太容易&#xff0c;很浪费时间。如果将自己的照片作为常用文件夹的图标&#xff0c;看起来醒目查找时也更为方便些。下面就介绍具体的操作教程。一、将照片格式转换为图标文件格式在电脑上将图…

利用css transition属性实现一个带动画显隐的微信小程序部件

我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的&#xff0c;但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使&#xff08;下面说明&#xff09;所以我们这个时候会考虑去使用微信官方提供的wx.createAnim…

c语言学生管理系统链表(dev vs2012下可以运行)

struct student { char name[10]; char sex[5]; long int num;//学号 int xuhao; int age; float score[3]; float averange; char DJ;//存放等级哦 struct student *next;};//定义结构体变量保存 名字 性别 年龄 成绩] 结构体声明int n;//存放学生人数int man;//存放统计的男生…