Js移动端自适应代码_rem布局

更新日期: 2020-09-03阅读量: 1522标签: 自适应

rem 是 css 的长度单位,它是相对于 <html> 元素的 font-size 的相对值。假设 html { font-size: 20px; },那么 1rem 就等于 20px。


js代码

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 >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};

if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)


代码说明

1rem等于根元素font-size属性大小,所以我们要根据不同尺寸的手机通过改变根元素的font-size大小来做适配的,所引入以上js,直接在css中用rem单位即可。例如:750px的设计稿上量得某区域宽度为150px,css中宽度写法为:width:1.5rem;,即 150/750 rem。  


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/9620

WKWebView加载的网页自适应大小

有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢?以下代码可以适配大小

web页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数;vw 是相对长度单位,相对于浏览器窗口的宽度,浏览器窗口宽度被均分为100个单位的vw,rem 和 vw 结合实现WEB页面等比例缩放自适应

子级宽度没有自适应内容宽度撑开,只适应到父级100%

子级不设置宽度或者宽度自适应撑开且设置不换行的情况下,子级宽度只会撑开到父级的100%宽度,即上图p标签只会撑开至600px而不是text的撑开宽度

vuejs中拖动改变元素宽度实现宽度自适应大小

拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时

HTML+Css让网页自动适应电脑手机屏幕

在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度,其中:width=device-width :表示宽度是设备屏幕的宽度,height=device-height :表示宽度是设备屏幕的宽度

iframe 自适应高度的多种实现方式

实现 iframe 的自适应高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。

让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和&nbsp;等HTML元素来添加换行和打印空格。textarea也能跟prev一样保留内容格式,但是元素高度是固定的

CSS自适应正方形问题

移动端项目中经常遇到自适应的问题,下面我们来看看关于自适应的方法:在盒模型中,margin、padding的百分比数值是相对于父元素的宽度计算的,所以将padding值设为与width值相同的百分比即可。

CSS3 @media媒体查询

@media 媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式,特别是需要设置设计响应式的页面,@media 是个不错的选择

移动端自适应

js动态设置html的字体大小,设计稿宽度750px,设备宽度350px,此时HTML 的font-size:50px,及1rem=50px;设置html的font-size: 13.33vw,设置html的font-size并缩放页面

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!