移动端网页 rem 自适应布局

(function(doc , win){
var DocElement = doc.documentElement;
var RsizeEvent = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘;
function ResetSize(){
var deviceWidth = DocElement.clientWidth;
if(!deviceWidth){
return false;
}
DocElement.style.fontSize = 100 * (deviceWidth / 750) + ‘px‘; //750是现在很多手机的宽度,可根据需求改变。
}
if(!doc.addEventListener){
return false;
}
win.addEventListener(RsizeEvent , ResetSize , false);
doc.addEventListener(‘DOMContentLoaded‘ , ResetSize , false);

})(document , window);

/*移动端网页 rem 自适应布局

在各种屏幕大小手机上实现自适应效果,用rem单位,根据手机屏幕大小自动改变(包括横屏和竖屏时):文字大小,图片大小,布局宽度大小等!*/

时间: 2024-11-24 05:58:45

移动端网页 rem 自适应布局的相关文章

rem自适应布局的回顾总结

使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗?rem的根html font-size设置为多少合适?看看这篇文章,也许能帮到你. 这些问题整理来自之前发表过的文章,细心的读者也可以自己翻翻之前的内容找到答案,本文统一给个回复,如果对你有用,还请点个赞,谢谢! rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发

rem自适应布局

rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是如何实现自适应布局的. rem的值 目前有两种,一种是根据js来调整html的字号,另一种则是通过媒体查询来调整字号. 使用js (function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.

rem自适应布局(转)

原文链接:http://caibaojian.com/web-app-rem.html rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算. rem的值 目前有两种,一种是根据js来调整html的字号,另一种

移动端rem自适应布局关键代码

function resi() { var html = document.querySelector("html"); var wW = document.body.clientWidth || document.documentElement.clientWidth; var maxW = 640; var minW = 320; if (wW > maxW) wW = maxW; var ratio = wW / minW; html.style.fontSize = 50

移动端网页大小自适应方案

目前比较常用的方法有: 首先要让页面大小铺满屏幕又不能溢出.只需要在html<head>标签内加入viewport(如下),参数分别表示:页面宽度= 屏幕宽度,最大和最小伸缩比都是1,不允许用户拉缩. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

移动端web app自适应布局探索与总结

要掌握的知识点: iphone6 屏幕尺寸为 375*667 (pt)也就是 网页 全屏显示时候 document.documentElement.clientWidth------可以理解为屏幕越大这个值越大(但是像素不一定高) dpr(设备独立像素):2.0   可用(window.devicePixelRatio)得出 (------------像素越高 或者屏幕越小-------dpr越大) window.devicePixelRatio = 物理像素 / dips 屏幕分辨率为 750

使PC端网页宽度自适应手机屏幕大小

有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机屏幕宽度: 在网页的<head>中增加一个meta标签: <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” /> 可以让网页的宽度自动适应手机屏幕的宽度. 其中:wid

移动端用rem使字体自适应

rem是css3引入的新的单位,与px和em相对比,我感觉rem更加便利,尤其是对移动端的字体自适应布局. rem是根据HTML的字体大小进行设置的. 而HTML的基本字体大小是16px,所以可以加入如下代码: 1 html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} 这样设置的意思是将HTML的font-size设置为10px,方便计算. 然后就可以可以使用rem作为单位了,将px换成rem是绝对可行的,如: 1 #div1{font-size:

Rem自适应js---flexible.min.js

网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不用再为各种设备宽度不同而烦恼如何实现自适应的问题. rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.1rem=16px(浏览器html的像素,可以设定这个基准值),假如浏览器的html设为64px,则下面的元素则1rem=64px来运