css -- 两种方法实现流式布局

Bootstrap将屏幕分为4个等级:
1.超小屏幕 (宽度小于768 px), 显示宽度 100%;
2.小屏幕 (宽度在768px ~ 992px), 显示宽度 750px;
3.中等屏幕 (宽度在992px ~ 1200px), 显示宽度 970px;
4.大屏幕 (宽度大于1200px), 显示宽度 1170px.

js实现:

window.addEventListener("resize", function() {let clientW = window.innerWidth;let container = document.querySelector(".container");if( clientW >= 1200) {container.style.width = "1170px";} else if ( clientW >= 992 ) {container.style.width = "970px";} else if ( clientW >= 768 ) {container.style.width = "750px";} else {container.style.width = "100%";}
});

CSS3媒体查询实现:

@media screen and ( max-width: 768px ) {.container{width: 100%;}
}
@media screen and ( min-width: 768px ) and ( max-width: 992px ) {.container {width: 750px;}
}
@media screen and ( min-width: 992 px ) and ( max-width: 1200px ) {.container {width: 970px;}
}
@media screen and ( min-width: 1200px ) {.container {width: 1170px;}
}

css -- 两种方法实现流式布局相关推荐

html 响应式布局九宫格,两种方法实现响应式九宫格布局
html布局以及基础样式代码如下响应式九宫格 html, body { color:#222; margin:0; padding: 0; text-decoration: none; } ul { ...
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客简介说明本文介绍前端的 ...
CSS的三大布局方式（流式布局，浮动布局和层布局）
文章目录前言一.标准文档流二.三种布局方式 1.流式布局 2.浮动布局 (1)字围效果 (2)圣杯布局 3.层布局定位的分类: (1) 相对定位 position:relative (2) 绝 ...
两栏布局，三栏布局，等高布局，流式布局
读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...
php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
css如何设置透明度？设置透明度的两种方法（代码实例）
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
防止email被抓取的两种方法（js和css）
现在很多无聊人士都用自己的spider在网上到处抓取email, 如果你的页面上写了自己的email,那么不多久就会收到很多垃圾邮件. 有很多方法可以避免被抓取,现在很多人都把@换成#,不过估计很多蜘 ...
用 CSS实现Bubble提示框的两种方法
第一种方法:主要是通过css border属性来实现,两个小三角形叠加,实现小箭头: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

css -- 两种方法实现流式布局

css -- 两种方法实现流式布局相关推荐

最新文章

热门文章