关闭

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

时间: 2020-09-03阅读: 782标签: 自适应

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

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

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

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

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

CSS实现自适应分隔线的N种方法

伪元素+transform:translateX(-100%);主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。

CSS自适应正方形问题

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

textarea高度自适应的两种方案

textarea元素存在selectionEnd和selectionStart的属性用来表示选中的文本开始位置和结束位置,DOM接口实例是 HTMLTextAreaElement, 它具有 setSelectionRange 方法,用来选中输入框中的文本

高度自适应

高度不去设置,或者高度设置auto 内容撑开父元素的高度。内容撑开父元素的高度 -> 最小高度的设置 min-height,浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度,会出现高度塌陷

字体大小自适应纯css解决方案

但是该方案存在一个bug,上面的代码,当浏览器窗口变化的时候,box中的文字并没有按照应有的比例变化,但是css3标准中是这么说的:When the height or width of the viewport is changed, they are scaled accordingly.

CSS实现自适应正方形、等宽高比矩形

利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度;利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult

CSS中auto是什么意思?

auto 你可以理解为一种 自动/自适应 的概念,比如现在项目需要一个宽度为960px的整体布局居中,你可使用margin:0 auto;来实现。 无论用户浏览器宽度为多少。

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

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

点击更多...

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