1、js动态设置html的字体大小
var clientWidth = 0;
if(document.documentElement.clientWidth >= 600){
clientWidth = 600;
}else{
clientWidth = document.documentElement.clientWidth;
}
document.documentElement.style.fontSize = 50 * clientWidth/375 + 'px';
window.onresize = function(){
if(document.documentElement.clientWidth >= 600){
clientWidth = 600;
}else{
clientWidth = document.documentElement.clientWidth;
}
document.documentElement.style.fontSize = 50 * clientWidth/375 + 'px';
}
设计稿宽度750px,设备宽度350px,此时HTML 的font-size:50px,及1rem=50px; 假设一元素在设计稿上宽度为750px,750/100=7.5rem(7.5*50=375px)。
计算方法:设计稿的尺寸 / 100 = XXX rem;
2、设置html的font-size: 13.33vw
首先要先说明:移动端的设计稿一般是width:750px,height:auto(这里指的是不确定),100vw = 100%,这个也没有问题吧;那么,设计稿拿过来,我们可以得出:750px = 100vw,这个也没有问题吧,那么1px等于多少vw呢? 是不是 1px = 100 / 750 vw = 0.3333vw;那么100px = 多少vw呢,这个应该知道了吧。100px = 13.33vw;
思路过程:
mobile.width = 750px => 750px = 100% =100vw => 750px = 100vw => 1px = 0.1333vw => 100px = 13.33vw => 1rem =100px;
即:我们把html:{font-size: 13.33vw} // 也就是以100px位基准;1rem = 100px;
计算方法:设计稿的尺寸 / 100 /2 = XXX rem;
3、设置html的font-size并缩放页面
var html = document.getElementsByTagName('html')[0];
var width = html.getBoundingClientRect().width;
html.style.fontSize = width / 16 + 'px';
var PixelRaio = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + PixelRaio + ',minimum-scale=' + PixelRaio + ',maximum-scale=' + PixelRaio + '"/>')
计算方法:设计稿的尺寸 / 46.875 = XXX rem;
来源:https://www.cnblogs.com/gxp69/archive/2018/11/11/9943012.html
在做自适应网页的时候,如果在图片中使用了热区map。图片可以通过样式实现:图片大小随页面变化,MAP中每个area的坐标也随页面等比例的变化效果。根据分辨率自适应热区坐标
有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢?以下代码可以适配大小
实现 iframe 的自适应高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。
在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度,其中:width=device-width :表示宽度是设备屏幕的宽度,height=device-height :表示宽度是设备屏幕的宽度
利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度;利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult
最近在做大屏可视化,页面数据展示基本都是用百度的echarts,因为页面要做自适应,所以当视窗变化的时候echarts也要变化。window.onresize 可以解决这个问题。而一般一个页面不可能只引用一个表格,当你引用多个的时候,有些地方需要注意。
css实现左侧宽度固定右侧宽度自适应:定位、浮动、margin;css3弹性盒模型实现自适应:上下高度固定中间高度自适应、左侧宽度固定右侧宽度自适应
rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数;vw 是相对长度单位,相对于浏览器窗口的宽度,浏览器窗口宽度被均分为100个单位的vw,rem 和 vw 结合实现WEB页面等比例缩放自适应
拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时
HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和 等HTML元素来添加换行和打印空格。textarea也能跟prev一样保留内容格式,但是元素高度是固定的
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!