HTML5 自适应rem布局

//当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,

//注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。

//总来的来就是监听窗口的变化,一旦有变化就需要重新设置根字体的值

var resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,

recalc = function() {

//设置根字体大小

document.documentElement.style.fontSize = 20 * (document.documentElement.clientWidth / 320) + ‘px‘;

};

//绑定浏览器缩放

window.addEventListener(resizeEvt, recalc, false);

//当所有DOM解析完以后会触发这个事件

document.addEventListener(‘DOMContentLoaded‘, recalc, false);

时间: 2024-10-29 10:45:48

HTML5 自适应rem布局的相关文章

rem - 移动前端自适应适配布局解决方案和比较(转载)

原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些宽度,使用一个模式,加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem淘宝最近开源的一个框架和网易的框架有同工之异.都是采用rem实现一稿解决所有设置自适应.在没出来这种方案之前,第一种做法的人数也不少.类似以下说到的拉钩网.看一下流云诸葛的文章. 1. 简单问题简单解决

手机端页面自适应:rem布局

rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return;

70.JS---利用原生js做手机端网页自适应解决方案rem布局

利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.s

手机端页面自适应解决方案—rem布局

只需在页面引入这段原生js代码就可以了 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 (function (doc, win) {        var docEl = doc.documentElement,            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',            recalc = function () {     

手机端页面自适应解决方案-rem布局

rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth

移动端rem布局背景图片使用以及sprite雪碧图

现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片. rem布局 所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写.比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写: div{ width: 1rem; height: 2rem; } 那么最终

响应式布局之浮动圣杯布局(双飞翼布局)—-自适应宽度布局

前端开发中自适应布局在实际应用中越来越普遍,特别是随着更多高级浏览器的出现html5和css3得到了更好的应用. 圣杯布局有个好处,完全符合前端开发中渐进增强的理念,由于浏览器解析是从DOM的上至下,这样圣杯布局可以把页面中重要的内容section放到DOM前面先解析,而次要的aside内容则放在DOM后面后解析. 下面的demo能够解决实际应用中绝大多数的自适应布局问题了,有兴趣的coder们可以研究下,代码如下: 左边固定,右边自适应(双飞翼布局的实现):demoA html部分: cont

移动前端自适应适配布局解决方案和比较

互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案: 固定一个某些宽度,使用一个模式,加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用rem 1. 简单问题简单解决 我觉得有些web app并一定很复杂,比如拉勾网,你看看它的页面在iphone4,iphone6,ipad下的样子就知道了: 它的页面有一个特点,就是: 顶部与底部的bar不管分辨率怎么变,它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息都位于条目的左边,薪资

细说移动端 经典的REM布局 与 新秀VW布局

和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定纵横比 5. REM + VW布局 6. 对比选择 方案选择 食用方式 一.前言 说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等. 而另一方面,还有一些 布局概念: 1. 静态布局 直