[分享]css全屏类似F11

CSS全屏，就像F11一样，可以让页面占据整个浏览器窗口，看起来更加美观。下面来讲一下如何通过CSS代码实现。/ 通过设置元素的宽高以及定位实现全屏 / .fullscreen { : fixed; ...

CSS全屏，就像F11一样，可以让页面占据整个浏览器窗口，看起来更加美观。下面来讲一下如何通过CSS代码实现。

/* 通过设置元素的宽高以及定位实现全屏 */
.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 使用伪元素实现全屏 */
.fullscreen::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 使用伪类实现全屏 */
.fullscreen:fullscreen {
    /* Safari 浏览器支持 */
}
.fullscreen:-webkit-full-screen {
    /* Chrome 和 Safari 支持 */
}
.fullscreen:-moz-full-screen {
    /* Firefox 支持 */
}
.fullscreen:-ms-fullscreen {
    /* IE 11 支持 */
} 

以上代码中，第一种方法是通过设置元素的宽高以及定位实现全屏，可以将需要全屏显示的元素设置为宽高100%并且定位为fixed，然后就可以实现全屏了。第二种方法是通过伪元素实现全屏，可以为需要全屏的元素添加一个伪元素并且将宽高设为100%以及fixed定位。第三种方法是使用伪类实现全屏，可以在需要全屏的元素上添加“:fullscreen”，该伪类在Safari浏览器中支持，而-webkit-full-screen、-moz-full-screen、-ms-fullscreen 分别支持 Chrome 和 Safari、Firefox 和 IE11。