react网页适配不同分辨率_前端页面适应不同分辨率

前端开发要考虑到不同分辨率电脑的页面展示问题，在开发者电脑上的界面在用户电脑上打开可能出现很大变形。

解决方案主要有：

针对不同分辨率用户设置不同的css

使用JS/jQuery动态调整

使用前端框架

简单介绍一下：

针对不同分辨率用户设置不同的css(不推荐)

即针对不同的分辨率，开发不同的css样式，在界面加载时，先判断用户屏幕分辨率，在应用相应的css

相比较，这种方法最复杂，而且如果系统面向大众，需要作很多不同的css

推荐文章：PC端页面适应不同的分辨率的方法

使用前端框架

针对不同分辨率展示问题，有很多大牛开发了诸多框架，最为知名的即Bootstrap,也是github上最为知名的框架

Bootstrap提供了许多css样式，在标签中应用这些样式后，前端页面即可自动针对不同分辨率调整显示样式。此外，Bootstrap还开发了一些常用前端控件，如轮播、导航栏、进度条等等。

Bootstrap的学习也较为简单。

相比较，这是最一劳永逸的方法，学会后可以很简单的进行前端工程开发，相当省事。Bootstrap(及其他同类前端框架)必定是前端开发的趋势。

使用JS/jQuery动态调整

这种方法只适合于要调整的页面元素较少的情况，如果分辨率改变后，页面中很多元素都有变形，而且页面整体变得混乱，不适合使用此方法。

常用的方法有：

获取屏幕宽度/高度/分辨率，针对各种情况设置样式

var screenw=screen.width;

switch (screenw){

case 1920:

$('.Hhandle').attr('data-height',343);

break;

case 1536:

$('.Hhandle').attr('data-height',373);

break;

}

获取屏幕宽度/高度/分辨率，找到其与样式之间的关系

var screenw=screen.width;

var setwidth=503.1942591335728-0.0836961379926832*screenw

$('.Hhandle').attr('data-height',setwidth);

————————————————

版权声明：本文为CSDN博主「niewzh」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/ScapeD/article/details/86553672