rem响应式JS

//窗口第一次打开时获取一次
rc();
//窗口改变时,实时获取。
window.onresize=rc;
function rc(){
//默认字体大小
var fontS=20;
//获取窗口的宽度
var windowWidth =document.documentElement.clientWidth;
//窗口宽度除设计图的大小获得一个比例
var rate=windowWidth/1366;
//设置默认大小×比例,进行响应式
document.documentElement.style.fontSize = fontS*rate+"px";
}

时间: 2024-10-16 02:35:32

rem响应式JS的相关文章

REM响应式布局

为什么么要响应式? 因为能兼容,手机.平板.PC终端既省钱又省力: 有很多网站的解决办法是,为不同的设备提供不同的mobile版本,或者iPhone/iPad版本.这样效果有保证,但是比较麻烦,同时要维护好几个版本: 于是,"""一次设计,普遍适用",根据屏幕宽度,自动调整布局(layout) 第一步: meta:vp标签 <meta name="viewport" content="width=device-width, use

rem 响应式用法

前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷. 同样的,响应式的设计应该秉承「内容优先,移动优先」的设计原则,那么我们知道网页中的内容主要是由文字图片等元素组成的,那么文字该如何响应式呢? 当我们每天面对缤纷的互联网世界的时候,文字不仅仅传递给我们众多的信息资讯

px转rem 响应式

(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (cl

手机响应式js轮播基础

onmousedown --->ontuchstart onmousemove --->ontouchmove onmouseup --->ontouchend ontuchstart & ontouchmove & ontouchend 必须通过事件绑定的形式添加; 尽快的把页面呈现给用户:window.onload ----> 不靠谱;DOMContentLoaded clientX ---> ev.targetTouches,是一个列表,使用的时候需要加

移动端响应式js代码

(function() { var b = document.documentElement, a = function() { var a = b.getBoundingClientRect().width; b.style.fontSize = .0625 * (640 <= a ? 640 : a) + "px" }, c = null; window.addEventListener("resize", function() { clearTimeou

rem+js响应式布局的设置

直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') html.style.fontSize=window.innerWidth/7.5+'px' window.onresize=function(e){ html.style.fontSize=window.innerWidth/7.5+'px' } })() 原文地址:https://www.cnbl

JS和CSS实现响应式

一.CSS实现响应式 CSS响应式的实现主要依赖于CSS媒体查询: 媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,例如:width,height,color.CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身.即通过媒体查询判断屏幕宽度,加载不同的CSS样式表 代码如下:注意一定要有一个默认样式表不加媒体查询,否则在IE8中访问时会没有样式表. <head> <meta charset="UTF-8

网页响应式媒体查询代码

原生实现rem响应式 <!DOCTYPE html> <html style="font-size: 100px"> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,