自適應瀏覽器高度和寬度+字體大小有點:
1.能自動判斷當前瀏覽器的高度和寬度(頁面裏面設置均百分比寬度)
2.JS裏面自己設置字體大小,在不同分辨率下顯示不一樣的字體
3.在瀏覽器最大化時候,JS會自動判斷屏幕高寬,從而使樣式佈局不會衝突變化
4.在瀏覽器最小化時候,JS會自動判斷屏幕高寬,從而使最小化的屏幕還和全屏效果一致,只是出現滾動條
全屏效果圖01
最小化效果圖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(); //瀏覽器高度
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