自适应浏览器高度和宽度+字体大小有点:
1.能自动判断当前浏览器的高度和宽度(页面里面设置均百分比宽度)
2.JS里面自己设置字体大小,在不同分辨率下显示不一样的字体
3.在浏览器最大化时候,JS会自动判断屏幕高宽,从而使样式布局不会冲突变化
4.在浏览器最小化时候,JS会自动判断屏幕高宽,从而使最小化的屏幕还和全屏效果一致,只是出现滚动条
全屏效果图01
自适应浏览器高度和宽度+字体大小 JS(主要针对Java后端>>全栈工程师)
最小化效果图02
自适应浏览器高度和宽度+字体大小 JS(主要针对Java后端>>全栈工程师)
页面设计效果图
自适应浏览器高度和宽度+字体大小 JS(主要针对Java后端>>全栈工程师)
自适应高宽JS效果图
自适应浏览器高度和宽度+字体大小 JS(主要针对Java后端>>全栈工程师)
自适应浏览器高度和宽度+字体大小 JS(主要针对Java后端>>全栈工程师)
附上JS代码(引用前必须先引用Jquery!!!)
// 作者:1228368500@qq.com
// 时间: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