Adaptive browser height and width + font size JS (primarily for Java backend >> All-stack engineers)

Adaptive Browser height and width + font size a bit:
1. Can automatically determine the height and width of the current browser (the width of the page is set to a percentage)
2.JS inside the font size, the different resolution of the font display
3. When the browser is maximized, JS will automatically determine the height of the screen, so that the style layout will not conflict changes
4. When the browser is minimized, JS will automatically determine the screen width, so that the minimized screen and full-screen effect is consistent, just appear scroll bar
Full Screen

Minimize the size of the

Page Design

Adaptive High Width js


include the JS code (you must refer to jquery before referencing!!! )
[Email protected]
Date: 2018-06-15
Description: Control screen size + fixed screen size + font size
Dynamically capture each display size
var width = window.screen.width; Screen resolution width
var height = window.screen.height; Screen resolution Height

var widths = $ (window). width (); Browser width
var heights = $ (window). Height (); Browser height

var nheight = math.round (height * 0.88); Set a specification value, rounding
$ (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 Method ==========================================================
/**

• 1. Control the minimum screen consignment
  */
  function size () {
  var wins = $ (window). width (); Always monitor screen size wide
  var HEIs = $ (window). Height (); High
  Determine if the width of the change is less than the original
  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. Control Font Size
  */
  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");
  }
  }
  My original intention is: In addition to the responsive layout, can be a different way to solve various types of resolution JS, I hope you can give me some suggestions, if I this article can help you, I am very happy.
  If have not understood can add oneself qq:1228368500

Adaptive browser height and width + font size JS (primarily for Java backend >> All-stack engineers)