响应式字体(js控制)

window.onload=function(x){if (‘addEventListener‘ in document) {document.addEventListener(‘DOMContentLoaded‘, function() {}, false);};function w(){var a=r.getBoundingClientRect().width;a>750&&(a=750*v),x.rem=a/15,r.style.fontSize=x.rem+"px"}var v,u,t,s=x.document,r=s.documentElement,q=s.querySelector(‘meta[name="viewport"]‘),p=s.querySelector(‘meta[name="flexible"]‘);if(q){var o=q.getAttribute("content").match(/initial\-scale=(["‘]?)([\d\.]+)\1?/);o&&(u=parseFloat(o[2]),v=parseInt(1/u))}else{if(p){var o=p.getAttribute("content").match(/initial\-dpr=(["‘]?)([\d\.]+)\1?/);o&&(v=parseFloat(o[2]),u=parseFloat((1).toFixed(2)))}}if(!v&&!u){var n=(x.navigator.appVersion.match(/android/gi),x.navigator.appVersion.match(/iphone/gi)),v=x.devicePixelRatio;v=n?v>=3?3:v>=2?2:1:1,u=1/v}if(r.setAttribute("data-dpr",v),!q){if(q=s.createElement("meta"),q.setAttribute("name","viewport"),q.setAttribute("content","initial-scale="+u+", maximum-scale="+u+", minimum-scale="+u+", user-scalable=no"),r.firstElementChild){r.firstElementChild.appendChild(q)}else{var m=s.createElement("div");m.appendChild(q),s.write(m.innerHTML)}}x.dpr=v,x.addEventListener("resize",function(){clearTimeout(t),t=setTimeout(w,300)},!1),x.addEventListener("pageshow",function(b){b.persisted&&(clearTimeout(t),t=setTimeout(w,300))},!1),"complete"===s.readyState?s.body.style.fontSize=12*v+"px":s.addEventListener("DOMContentLoaded",function(){s.body.style.fontSize=12*v+"px"},!1),w()}(window);

把上面这段代码放入js中,之后设置字体rem,在屏幕宽度为750px内时字体会根据屏幕缩小而缩小,

时间: 2024-10-14 09:56:37

响应式字体(js控制)的相关文章

CSS响应式字体,自适应视图窗口大小

这似乎是一个新的字体大小单位 Viewport-Percentage Lengths. 一个单位相于当前视图窗口大小的1%,宽度和高度是不同的,分别用(vw, vh)表示.你可以通过vmin和vmax设置最大最小值. 1vw = 当前视图窗口(viewport)1%的宽度 1vh = 当前视图窗口(viewport)1%的高度 1vmin = 1vw 或 1vh, 取决于哪个更小一点 1vmax = 1vw 或 1vh, 取决于哪个更大一点 样式中直接:width:1vw; 参考:http://

到底什么是响应式布局

做移动端的前端,接到的需求中肯定离不开响应式布局,那么到底什么是响应式布局,其实现的原理在哪,我个人的看法如下: 1.目的:在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够适配多个终端 2.由于响应式布局多是针对移动端,所以首先要在<head>标签中添加下面这行代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, use

响应式布局的开发基础

第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端. 第二:响应式设计的步骤 了解了什么是响应式,那么接下来我们就要

响应式布局总结

响应式布局的开发基础知识 本章主要分为以下几个部分 正确理解响应式设计 响应式设计的步骤 响应式设计需要注意的问题 响应式网页布局实现原理 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于

响应式设计排版的问题

当我们建立网站的时候,我们一般从定义正文开始.正文的定义显示了你的主栏有多宽,其它几栏的大小就随它自己内容定义了.直到最近,各种屏幕分辨率或多或少是同质化的.如今,我们要处理各种屏幕尺寸和分辨率.这让处理变得更复杂.为了防止给每个可能的屏幕尺寸做不同的层级设计,很多网页设计师会采用响应式设计网站的概念.一言以蔽之,这是一种网页布局会自动适应屏幕尺寸的概念.有很多种方法可以定义这种概念. 适应性布局:按步骤调整布局适应有限数量的屏幕尺寸.流体性布局:不断地调整布局以适应每一种可能的宽度.两种方式都

html5/css3响应式页面开发总结

一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会带来兼容各种设备工作量大.代码累赘.加载时间长的缺点,但它们跨平台和终端,能"一次设计,普遍适用",可以根据屏幕分辨率自适应以及自动缩放图片.自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile

html5 响应式布局

响应式布局 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端. 第二:响应式设计的步骤 响应式设计的步骤就是1.编

响应式布局的两种实现形式

所谓的响应式布局,就是设计一个网站的时候,让它满足能同时适应不同的端口,而不用对不同端口设计不同的网页. 实现方式:采用百分比自适应布局 1.原生代码实现. 在国内目前设计网页的时候,一般会分成PC端和移动端两套页面,但在一定的情况下,必须满足只设计一个页面的情况下,满足不同端口都能正常使用, 因此会用用到自适应的方法. 用原生代码实现的根本在于媒体查询@media的设置. @media screen 可以查询当前浏览器的尺寸,因此可采用该方法对同一个页面设置不同的CSS样式,来满足不同分辨率要

复杂产品的响应式设计【流程篇】

转载:http://ued.taobao.org/blog/2013/05/复杂产品的响应式设计[流程篇]/ 响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计.前端和开发团队之间的协作模式带来新的挑战.在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪些事情让后端开发来做更合理?经历“玩客”第一版后,我们得到了一些答案. 响应式设计之所以叫响应式“设计”而不叫响应式“技术”,是因为它是一项设计先行的工作.需要设计先明确好响