<script>
// 该代码来自http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/
(function (doc, win) {
// 分辨率Resolution适配
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
};
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
// 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
(function(){
return;
var dpr = scale =1;
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
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;
//
var 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);
}
})();
})(document, window);
</script>
分享到:
相关推荐
转换公式通常是:pxValue / htmlFontSize * remBaseValue,其中remBaseValue是开发者设定的基准rem值,通常与`flexible.js`设置的基础字体大小相匹配。 3. 最后,更新后的配置项被传递给ECharts实例,从而使得图表在...
5. **使用媒体查询**:对于不同的屏幕尺寸,可能需要调整基础字体大小,进而改变所有rem的计算结果。通过CSS媒体查询,我们可以针对特定的视口宽度设置不同的基础字体大小,实现更细致的适配。 6. **兼容性考虑**:...
在这篇文章中,作者详细介绍了如何使用JavaScript(简称JS)动态设置rem来实现移动端字体的自适应。在移动前端开发中,字体自适应是非常关键的一个环节,它能保证不同尺寸的设备上网页文本的显示效果都令人满意。...
"移动端适配rem文件js代码.zip"这个压缩包就是针对这一需求提供的一种解决方案,它包含了一个名为“rem.js”的JavaScript文件,用于动态调整页面元素的大小,以适应不同分辨率和屏幕尺寸的手机或平板电脑。...
这是因为移动设备的屏幕尺寸和像素密度差异较大,为了保证不同设备上的视觉一致性,我们通常会根据设备的宽度或者屏幕像素密度来动态设置`html`元素的字体大小。例如,使用媒体查询(media query): ```javascript...
}`,然后根据屏幕宽度动态调整这个值,确保不同屏幕尺寸下的元素比例正确。 2. **媒体查询**:利用CSS3的媒体查询(Media Queries),我们可以为不同屏幕尺寸设定不同的html字体大小。例如: ```css @media ...
在移动端Web开发中,rem(root em)布局是一种常见的响应式设计方法,它允许开发者以相对于根元素(通常是html元素)的字体大小来设置元素尺寸,从而实现不同屏幕尺寸下的自适应布局。本文将深入探讨rem布局的工作...
1. **设置基础字体大小**:首先,我们需要在HTML文档的`<head>`部分或者通过JavaScript动态设置根元素的字体大小。考虑到移动优先的策略,一般会设置一个较小的初始值,如12px,然后根据屏幕宽度进行动态调整。 2. ...
这些文件可以帮助开发者理解并实践rem布局的完整流程,包括如何设置基础字体大小、如何定义rem单位的样式以及如何处理不同屏幕尺寸的适配。 总结来说,rem移动端页面满屏H5自适应方案是一种基于CSS3 rem单位的响应...
总之,通过`postcss-px2rem`插件和动态设置`html`的`font-size`,我们可以有效地实现页面的自适应布局,使得UI在不同设备上都能保持良好的视觉效果。在使用`vue-mobile-template`这样的模板时,开发者可以直接利用...
总结,`grunt-px2rem`是前端开发者在进行响应式布局时的一个实用工具,它能有效地帮助我们处理不同设备和屏幕尺寸下的CSS样式,确保页面在各种环境下都能呈现出良好的视觉效果。通过合理配置和使用,可以提高开发...
本文将详细解析如何利用rem单位在HTML5页面中创建与设计图比例一致、在不同屏幕尺寸下仍能保持布局一致性的页面。 首先,我们需要理解rem的基本含义。rem(root em)是指相对于根元素(通常是html元素)的字体大小...
在移动端Web开发中,适配不同的屏幕尺寸是一项挑战。两种常用的解决方案是REM(Root Em)布局和Viewport Width(VW)布局。这篇文章将深入探讨这两种布局方式,并通过实例来展示它们在JavaScript和CSS中的应用。 **...
在本项目中,可能结合媒体查询来定义不同屏幕尺寸下的REM基准值,确保在各种设备上都能正确显示布局。 5. **CSS预处理器**:虽然没有明确提及,但现代前端开发往往使用Sass或Less这样的CSS预处理器,它们支持变量、...
5. **优化阅读体验**:在设置rem时,考虑到用户的可读性和舒适度,通常会保证基本的字体大小,如body元素的字体大小,不会因为屏幕尺寸变化而过于波动。 6. **计算工具**:开发者可以使用在线工具或代码片段来快速...
在移动开发领域,REM(根元素字体大小)布局是一种常用的技术,它允许开发者根据设备的屏幕尺寸进行响应式设计,确保界面在不同设备上呈现良好的视觉效果。苏宁移动端的仿写项目采用REM布局,旨在模拟苏宁官网在手机和...
这样,设计师可以按照设计稿的像素值(例如设计稿以750px宽度为基准)来设定元素的`rem`值,然后在不同屏幕尺寸下保持相对比例。 二、方案二:JavaScript动态计算`html`字体大小 1. **基础原理**:通过JavaScript...
2. **设置比例**:根据基准尺寸确定每`rem`代表的实际像素值,例如,假设640px为基准,则1rem = 40px。 3. **监听窗口变化**:通过JavaScript监听窗口尺寸的变化,实时更新`<html>`元素的字体大小。 #### 四、示例...
总的来说,移动端开发中的"rem+flexible.js布局"结合了rem的响应式特性与flex布局的灵活性,使得开发者能够轻松地创建适应各种屏幕尺寸的用户界面,提高了开发效率。通过学习和实践这一技术,新手可以快速掌握移动端...
REM(Relative Em Unit)是一种相对单位,以根元素(通常是 html 元素)的字体大小为基准,使得页面元素的尺寸在不同屏幕尺寸下能够自动调整,从而达到良好的响应式效果。 1. **CSS 与 H5 自适应** 在移动设备上,...