自適應瀏覽器高度和寬度+字體大小 JS（主要針對Java後端>>全棧工程師）

自適應瀏覽器高度和寬度+字體大小有點：
1.能自動判斷當前瀏覽器的高度和寬度（頁面裏面設置均百分比寬度）
2.JS裏面自己設置字體大小，在不同分辨率下顯示不一樣的字體
3.在瀏覽器最大化時候，JS會自動判斷屏幕高寬，從而使樣式佈局不會衝突變化
4.在瀏覽器最小化時候，JS會自動判斷屏幕高寬，從而使最小化的屏幕還和全屏效果一致，只是出現滾動條
全屏效果圖01

最小化效果圖02

頁面設計效果圖

自適應高寬JS效果圖


附上JS代碼（引用前必須先引用Jquery!!!）
// 作者：[email protected]
// 時間：2018-06-15
// 描述：控制屏幕大小+固定屏幕大小+字體大小
//動態獲取各顯示屏大小
var width = window.screen.width; //屏幕分辨率寬度
var height = window.screen.height; //屏幕分辨率高度

var widths = $(window).width(); //瀏覽器寬度
var heights = $(window).height(); //瀏覽器高度

var nHeight = Math.round(height * 0.88); //定個規格值，四捨五入
$(document).ready(function() {

var main = $('#ycw_heads');
var mains = $('#ycw_headss');
var mainss = $('#ycw_headsss');

if(widths < width) {

    main.css("width", width + "px");
    main.css("height", nHeight + "px");
    mains.css("width", width + "px");
    mains.css("height", nHeight + "px");
    mainss.css("width", width + "px");
    mainss.css("height", (nHeight - 60) + "px");

    fontDX();

} else {
    main.css("width", widths + "px");
    main.css("height", heights + "px");
    mains.css("width", widths + "px");
    mains.css("height", heights + "px");
    mainss.css("width", widths + "px");
    mainss.css("height", (heights - 60) + "px");

    fontDX();

}
//改變屏幕大小
window.onresize = function() {
    size(); //調用方法，時更改頁面代銷
}

});

//===================================== javaScript方法 ==========================================================
/**

• 1.控制最小屏幕代銷
  */
  function size() {
  var wins = $(window).width(); //時刻監聽屏幕大小寬
  var heis = $(window).height(); //高
  //判斷改變的寬度是否小於原先的
  if(wins < width) {
  main.css("width", width + "px");
  main.css("height", nHeight + "px");
  mains.css("width", width + "px");
  mains.css("height", nHeight + "px");
  mainss.css("width", width + "px");
  mainss.css("height", (nHeight - 60) + "px");

  fontDX();

  } else {
  main.css("width", widths + "px");
  main.css("height", heights + "px");
  mains.css("width", widths + "px");
  mains.css("height", heights + "px");
  mainss.css("width", widths + "px");
  mainss.css("height", (heights - 60) + "px");

  fontDX();

  }
  }

/**

• 2.控制字體大小
  */
  function fontDX() {
  var font12 = $(".f1 .font12");
  var font14 = $(".f1 .font14");
  var font16 = $(".f1 .font16");
  var font18 = $(".f1 .font18");
  if(width >= 1440) {
  font12.css("font-size", "12px");
  font14.css("font-size", "14px");
  font16.css("font-size", "16px");
  font18.css("font-size", "18px");
  } else {
  font12.css("font-size", "10px");
  font14.css("font-size", "12px");
  font16.css("font-size", "14px");
  font18.css("font-size", "16px");
  }
  }
  我的初衷是：除了響應式佈局外，能不能換種做法解決各類分辨率不同的js，希望大家能給我點建議，如果我的這篇文章能幫到你，我很開心。
  如有不瞭解可加本人QQ:1228368500