前端页面适应不同分辨率

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

解决方案主要有：

• 针对不同分辨率用户设置不同的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);