How to adapt css to the browser

How to set up the css adaptive browser: first open the corresponding code file; then use the js code "jQuery(window).resize(function(){...}" to implement content adaptive browser width Or height.

The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

css setting adaptive browser

When making pages, we often encounter that when adjusting the browser size, if we want to realize the content adapting to the browser width or height, we can use js processing:

 jQuery(window).resize(function(){
          jQuery('#contextDiv').width(jQuery(document).width());
   });
  jQuery(window).resize();

Organize to obtain the browser width and height Highly advanced method:

$j(window).height(); //浏览器窗口可视区域高度
$j(window).width()); //浏览器窗口可视区域宽度
$j(document).height()); //浏览器窗口文档的高度
$j(document).width()); //浏览器窗口文档对于象宽度
$j(document.body).width()); //浏览器窗口文档body的高度
$j(document.body).height()); //浏览器窗口文档body的高度
$j(document.body).outerHeight(true)); //浏览器窗口文档body的总高度 包括border padding margin
$j(document.body).outerWidth(true));//浏览器窗口文档body的总宽度 包括border padding margin
$j(document).scrollTop()); //获取滚动条到顶部的垂直高度
$j(document).scrollLeft()); //获取滚动条到左边的垂直宽度

Recommended: "css video tutorial"

The above is the detailed content of How to adapt css to the browser. For more information, please follow other related articles on the PHP Chinese website!