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)