原生实现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.0, maximum-scale=1.0, minimum-scale=1.0"/> ???<title></title> ???<script> ???????/*让文字和标签的大小随着屏幕的尺寸做变话 等比缩放*/ ???????var html = document.getElementsByTagName(‘html‘)[0]; ???????console.log(html); ???????/*取到屏幕的宽度*/ ???????var width = window.innerWidth; ???????console.log(width); ???????/* 640 100 ?320 50 */ ???????var fontSize = 100/640*width; ???????????????console.log(fontSize); ???????/*设置fontsize*/ ???????html.style.fontSize = fontSize +‘px‘; ???????window.onresize = function(){ ???????????var html = document.getElementsByTagName(‘html‘)[0]; ???????????console.log(html); ???????????/*取到屏幕的宽度*/ ???????????var width = window.innerWidth; ???????????console.log(width); ???????????/* 640 100 ?320 50 */ ???????????var fontSize = 100/640 * width; ???????????console.log(fontSize); ???????????/*设置fontsize*/ ???????????html.style.fontSize = fontSize +‘px‘; ???????} ???</script> ???<style> ???????body,html{ ???????????margin: 0; ???????????padding : 0; ???????} ???????div{ ???????????width: 5.28rem; ???????????height: 1rem; ???????????background: red; ???????????color: #fff; ???????????font-size: 0.16rem; ???????} ???</style></head><body> ???<div>AAA</div></body></html>jq实现rem响应式
$(function(){ ???$(window).on(‘resize‘,function(){ ???????var width=$(window).width(); ???????var fontSize=(width/640)*100; ???????$(‘html‘).css(‘font-size‘,fontSize) ???}).trigger(‘resize‘)})网页响应式媒体查询代码
原文地址：https://www.cnblogs.com/zbx-boke/p/9571721.html