body 设置适应缩放_前端开发分辨率自适应

不管是做Web前端开发的,还是做移动端H5开发的,都会受到全屏分辨率自适应的困扰,下面我们就分享一下CSS解决分辨率自适应的几种方法。

cfccabbc0856cb09a7df13725fef53cc.gif

一、meta标签 1、H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 2、viewport (1)viewport 是用户网页的可视区域。翻译为中文可以叫做"视区" (2)手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。 3、viewport标签 < meta  name ="viewport”   content ="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 4、viewport标签属性

属性名

取值

描述

width

正整数或device-width

定义视口的宽度,单位为像素

height

正整数或device-height

定义视口的高度,单位为像素,一般不用

initial-scale

[0.0-10.0]

定义初始缩放值

minimum-scale

[0.0-10.0]

定义缩小最小比例,它必须小于或等于maximum-scale设置

maximum-scale

[0.0-10.0]

定义放大最大比例,它必须大于或等于minimum-scale设置

user-scalable

yes/no

定义是否允许用户手动缩放页面,默认值yes

二、rem标签1、rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。2、目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。 p     {   font-size : 14px ;     font-size : .875rem ;   }3、不同屏幕下的规则定义,即基数的定义方式:可以通过CSS定义,不同宽度范围里定义不同的基数值,当然也可以通过js一次定义方法如下

(function(doc,win){

    var docE1 = doc.documentElement,

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function(){

        var clientWidth = docE1.clientWidth;

        if(!clientWidth) return;

        //其中20根据你设置的html的font-size属性值做适当的变化

        docE1.style.fontSize = 20 * (clientWidth / 320) + 'px';

    };

    if(!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

a9ba7fd148222b9e43468775aac327f5.png

三、百分比

百分比指的是父元素,所有百分比都是这样的;子元素宽度50%,那么父元素的宽度就是100%;所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度),而子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面这种方法就力不从心了。

四、媒体查询1、媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生。2、媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,如果浏览器窗口小于 500px, 背景将变为浅蓝色,如下所示

@media only screen and(max-width:500px){

    Body{

        Background-color:lightblue;

}

}

到此,全屏宽度和分辨率适配的CSS方法就分享完了,希望对大家能有所帮助。11e1af51e3bbec92ed7bc6308288fdf5.png11e1af51e3bbec92ed7bc6308288fdf5.png11e1af51e3bbec92ed7bc6308288fdf5.png

7315886a7fc3f0005b50e072720f5972.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数据可视化是指将数据通过图形化的方式展示出来,以便于人们更直观地理解和分析数据。而分辨率自适应是指在不同屏幕分辨率下能够自动调整数据可视化的布局和样式,以保证在不同设备上都能够正常显示。 在JavaScript中,可以通过编写特定的代码来实现数据可视化分辨率自适应的功能。下面是一个简单的示例代码: 1. 首先,通过JavaScript获取当前设备的屏幕分辨率: ``` var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; ``` 2. 根据屏幕分辨率,计算出合适的图表尺寸。例如,可以将屏幕宽度的80%作为图表的宽度,高度根据需要进行调整: ``` var chartWidth = screenWidth * 0.8; var chartHeight = chartWidth / 2; // 假设图表的高度是宽度的一半 ``` 3. 将计算得到的图表尺寸应用到相应的HTML元素上。例如,可以通过设置元素的宽度和高度来实现: ``` var chartDiv = document.getElementById("chart"); // 假设图表的容器是一个id为"chart"的div元素 chartDiv.style.width = chartWidth + "px"; chartDiv.style.height = chartHeight + "px"; ``` 通过以上的代码,我们可以根据当前设备的屏幕分辨率动态地调整数据可视化图表的尺寸,从而实现分辨率自适应的效果。当用户在不同设备上访问网页时,图表能够适应不同的屏幕分辨率,并确保数据可视化的效果良好。 当然,以上只是一个简单的示例,实际应用中还需要根据具体情况来进行相应的调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值