移动端自适应

时间: 2018-11-12阅读: 1930标签: 自适应

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

站长推荐

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

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

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

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

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

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

echarts 表格自适应需要注意的问题

最近在做大屏可视化,页面数据展示基本都是用百度的echarts,因为页面要做自适应,所以当视窗变化的时候echarts也要变化。window.onresize 可以解决这个问题。而一般一个页面不可能只引用一个表格,当你引用多个的时候,有些地方需要注意。

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

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

CSS自适应正方形问题

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

js 让textarea的高度自适应父元素的高度

textarea按照普通元素设置height是没有作用的,可以这么来设置,下面给上一段项目代码。动态textArea祖先元素节点的高度,myCener是整个页面高度,otherDiv是textArea的祖先元素以外的其他高度

css弹性盒模型实现元素宽度(高度)自适应

css实现左侧宽度固定右侧宽度自适应:定位、浮动、margin;css3弹性盒模型实现自适应:上下高度固定中间高度自适应、左侧宽度固定右侧宽度自适应

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

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

WKWebView加载的网页自适应大小

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

将一堆图片自适应页面排列

最近在开发一个批量展示图片的页面,图片的自适应排列是一个无法避免的问题,在付出了许多头发的代价之后,终于完成了图片排列,并封装成组件,最终效果如下

点击更多...

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