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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.