自适应浏览器高度和宽度+字体大小 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

原文地址：http://blog.51cto.com/13282847/2134159