前端開發要考慮到不同分辨率電腦的頁面展示問題，在開發者電腦上的界面在用戶電腦上打開可能出現很大變形。
解決方案主要有：
針對不同分辨率用戶設置不同的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