自适应浏览器高度和宽度+字体大小 JS（主要针对Java后端>>全栈工程师） www.acgred.cn

自适应浏览器高度和宽度+字体大小有点：
1.能自动判断当前浏览器的高度和宽度（页面里面设置均百分比宽度）
2.JS里面自己设置字体大小，在不同分辨率下显示不一样的字体
3.在浏览器最大化时候，JS会自动判断屏幕高宽，从而使样式布局不会冲突变化
4.在浏览器最小化时候，JS会自动判断屏幕高宽，从而使最小化的屏幕还和全屏效果一致，只是出现滚动条
全屏效果图01
自适应浏览器高度和宽度+字体大小 JS（主要针对Java后端>>全栈工程师）
最小化效果图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(); //浏览器高度 www.acgred.cn

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() { www.gaimor.cn
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"); www.ytbicycle.com
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

自适应浏览器高度和宽度+字体大小 JS（主要针对Java后端>>全栈工程师） www.acgred.cn

猜你喜欢