media媒体查询媒体查询入门指南!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title style media screen and (max-width: 400px) { .container { width: 300px; height: 300px; border: 1px solid aqua; } } media screen and (min-width: 500px) and (max-width: 700px) { .container { width: 500px; height: 500px; border: 1px solid rgb(30, 193, 65); } } img { width: 100%; height: 100%; object-fit: contain; } /style /head body div classcontainer img src./yinghua.jpg / /div script let textDom document.createElement(div); let wid window.innerWidth; textDom.textContent 现在的屏幕宽度是 wid px; document.body.appendChild(textDom); window.addEventListener(resize, function () { wid window.innerWidth; textDom.textContent 现在的屏幕宽度是 wid px; }); /script /body /html媒体查询就是根据不同的屏幕大小编写一套对应的css。在bootstrap的源码中可以看到非常多的媒体查询使用js实现响应式监听resize事件根据屏幕宽度设置css比如template div :style{ width: innerW 500 ? 400px : 500px } classinner-box/div /template script setup const innerW ref(window.innerWidth); const onResize (e) { innerW.value window.innerWidth; }; onMounted(() { window.addEventListener(resize, onResize); }); onBeforeUnmount(() { window.removeEventListener(resize, onResize); }) /script style scoped langless .inner-box { height: 200px; background-color: aqua; } /stylemeta标签!-- 对移动设备开启响应式 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 /MDN原文namename和content属性可以一起使用以名 - 值对的方式给文档提供元数据其中 name 作为元数据的名称content 作为元数据的值。 在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。content此属性包含http-equiv或name属性的值具体取决于所使用的值。作用控制视口的尺寸和缩放。widthdevice-width设置视口宽度为设备的宽度initial-scale1.0设置初始缩放比例为 1。flex和组件库Row/Col栅格的响应式Element-plus、iView、Ant-Design-Vue等组件库都会有Grid栅格这一栏右侧分类有响应式布局在AntDV的栅格一栏F12查看元素设置其利用的了media媒体查询和flex缩放响应式布局参照 Bootstrap 的 响应式设计预设六个响应尺寸xssmmdlgxlxxl。bootstrap中文网-布局-栅格关于flex: 0 0 25%;MDN-flexflex: 0 0 25%是flex布局中的一种简写属性分别设置了flex-grow、flex-shrink和flex-basis。下面解释各个部分的含义1.flex-grow元素的放大比例含义当容器中有剩余空间时flex-grow定义了项目如何分配这个剩余空间。取值可以是任何非负数0、1、2 等。0表示项目不放大容器中有剩余空间时元素不会变大。1表示元素按比例分配剩余空间。如果多个元素的flex-grow值为 1它们会平等地分配容器中的剩余空间。如果一个元素的flex-grow为 2另一个为 1则前者分配的剩余空间是后者的两倍。2.flex-shrink元素的缩小比例含义当容器空间不足时flex-shrink决定了项目如何缩小以适应容器的尺寸。取值可以是任何非负数。0元素不会缩小超出容器部分可能会溢出。1元素按比例缩小。当容器空间不足时flex-shrink为 1 的元素将按比例缩小。如果有两个元素一个flex-shrink为 2另一个为 1则前者缩小得更多。3.flex-basis元素的初始大小含义指定了元素的初始大小可以是长度、百分比等。这决定了元素在分配空间之前的基础宽度或高度取决于flex-direction。取值可以是具体的尺寸如px、%等或auto。auto元素的初始大小是内容的大小或根据宽度/高度属性来确定。具体值如25%、100px明确设置元素的初始大小容器的剩余空间将在分配之前根据这个大小计算。注意默认值是0 1 auto即默认不放大允许缩小初始大小由内容决定。flex: 1 1 auto;自动放大、缩小宽度由内容决定flex: 100px;实际为flex: 1 1 100px当两个兄弟元素设置为.box-1 { flex: 200px; } .box-2 { flex: 100px; }那么两个元素的宽度差始终为200px - 100px 100px如果是百分比宽度差为则为20% - 10%* 父元素宽度栅格布局阮一峰 CSS Grid 网格布局教程Flex 布局是轴线布局只能指定项目针对轴线的位置可以看作是一维布局。Grid 布局则是将容器划分成行和列产生单元格然后指定项目所在的单元格可以看作是二维布局。Grid 布局远比 Flex 布局强大。自动填充方案display: grid; grid-template-columns: repeat(auto-fill, minmax(250px 1fr));有时单元格的大小是固定的但是容器的大小不确定。如果希望每一行或每一列容纳尽可能多的单元格这时可以使用auto-fill关键字表示自动填充。gridmediamedia (max-width: 400px) { .box { grid-template-columns: 1fr 1fr; } }多列布局MDN-多列布局column-count: 3; column-gap: 10px; column-width: 100px;和栅格布局很相似但是栅格布局能够更精确的控制行列瀑布流布局column多列布局实现style .box { column-count: 3; column-gap: 10px; } img { width: 100%; } media (min-width: 768px) { .box { column-count: 4; } } /style div classbox img src./yinghua.jpg alt / img src./tianye.jpg alt / img src./green.jpg alt / img src./green.jpg alt / img src./1.jpg alt / img src./2.jpg alt / img src./3.jpg alt / img src./4.jpg alt / img src./5.jpg alt / img src./6.jpg alt / /divgrid栅格布局实现!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleGrid Masonry Layout/title style .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 动态列宽 */ grid-gap: 20px; /* 网格间距 */ grid-auto-rows: 10px; /* 定义自动行高的小单位 */ } .grid-item { background-color: lightblue; border: 1px solid #ccc; padding: 10px; font-size: 16px; line-height: 1.5; } /* 通过行跨度实现不同高度的效果 */ .grid-item:nth-child(odd) { grid-row: span 20; /* 偶数项跨越更多行 */ } .grid-item:nth-child(even) { grid-row: span 10; /* 奇数项跨越较少行 */ } /style /head body div classgrid-container div classgrid-item1. Lorem ipsum dolor sit amet, consectetur adipiscing elit./div div classgrid-item2. Proin ac orci eu erat volutpat aliquam./div div classgrid-item3. Integer feugiat diam nec metus cursus, et sagittis mauris laoreet./div div classgrid-item4. Nulla facilisi./div div classgrid-item5. Donec sollicitudin./div div classgrid-item6. Maecenas scelerisque./div div classgrid-item7. Vestibulum et justo sit amet est auctor hendrerit./div div classgrid-item8. Integer feugiat diam nec metus cursus./div /div /body /html栅格布局的第二种实现注意masonry目前只在火狐浏览器支持.box { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; grid-template-rows:masonry; } img { width: 100%; display: block; }图片的响应式方案除了上述几种方案图片还独特的方式。img标签img src./yinghua.jpg srcset./tianye.jpg 1000w, ./green.jpg 800w sizes(max-width: 400px) 200px, (max-width: 500px) 300px /其中800w意义张图片的宽度是 800 像素。picture标签picture source media(max-width: 400px) srcset./tianye.jpg/scource source media(max-width: 600px) srcset./green.jpg/scource img src./yinghua.jpg / /picture其实这两种实现方案也是“媒体查询“只不过换了一种写法字体的响应式方案和特殊的单位根据实际情况采用媒体查询和rem、vw等方式实现font-size: 3remfont-size: 4vw为了不让字体在屏幕较窄的情况下变的特别小可以改进为font-size: calc(2rem 4vw)rem相对于根元素html的字体大小即**html元素的font-size**。它不会受到父元素字体大小的影响。默认情况下浏览器的根元素字体大小通常是16px但你可以修改。html { font-size: 16px; } .child { font-size: 2rem; /* 2rem 2 * 16px 32px */ }数据可视化中的zoom缩放获取地址栏中的z这个参数以此改变缩放方式/** * 获取地址栏参数 * param {*} name * returns */ export const getUrlKey (name) { return ( decodeURIComponent( (new RegExp([?|] name ([^;]?)(|#|;|$)).exec( location.href ) || [, ])[1].replace(/\/g, %20) ) || null ) } /** 缩放屏幕 */ export const zoom () { let k getZoom() if (getUrlKey(z)) { document.body.style.transform scale(${k[0]},${k[1]}) } else { let z1 Math.min(...k) document.body.style.transform scale(${z1}) } } /** * 获取缩放比例 * returns {number} */ function getZoom() { const [W, H] [window.innerWidth, window.innerHeight] const realk W / H let k1, k2 k1 H / config.sHeight k2 W / config.sWidth return [k2, k1] }app.vuewindow.addEventListener(resize, () { zoom() }).lesszoom: true; // 定义一个布尔变量用来控制不同的响应布局模式 sWidth: 1920; // 设计稿的宽度单位是px sHeight: 1080; // 设计稿的高度单位是px remHeight: sHeight*100/sWidth; // 通过宽高比例计算出rem单位下的高度 // 定义一个mixin函数 .fontRoot根据传入的 a 值切换字体大小设置 .fontRoot (a) when (a true) { font-size: unit((sWidth/100),px); // 当 a true 时设置字体大小为设计稿宽度的 1/100 } .fontRoot (a) when (a false) { font-size: 1vw; // 当 a false 时字体大小设置为视口宽度的1% } // 定义一个mixin函数 .wandh根据传入的 a 值切换宽高设置 .wandh (a) when (a true) { width: ~{sWidth}px; // 当 a true 时设置宽度为设计稿宽度 height: ~{sHeight}px; // 设置高度为设计稿高度 } .wandh (a) when (a false) { width: 100rem; // 当 a false 时设置宽度为 100rem适应不同分辨率 height: ~{remHeight}rem; // 高度通过 rem 值计算保持设计稿比例 } * { margin: 0; padding: 0; box-sizing: border-box; } html { width: 100vw; // 设置html宽度为视口宽度 height: 100vh; // 设置html高度为视口高度 .fontRoot(zoom); // 根据 zoom 的值调用 .fontRoot 函数来设置字体大小 background-color: rgb(0, 0, 0); // 背景色为黑色 } body { display: flex; // 使用flex布局 position: relative; overflow-y: hidden; // 隐藏竖向滚动条 overflow-x: hidden; // 隐藏横向滚动条 width: 100%; // body的宽度设置为 100% height: 100%; // body的高度设置为 100% user-select: none; // 禁止文本选择 background-color: rgb(0, 0, 0) !important; // 强制设置背景色为黑色 align-items: center; // 垂直方向居中 justify-content: center; // 水平方向居中 color: white; // 文本颜色为白色 } #app { margin: 0 auto; // 水平居中 .wandh(zoom); // 根据 zoom 的值调用 .wandh 函数来设置宽高 } .router-main-box { position: relative; // 位置相对定位 .wandh(zoom); // 根据 zoom 的值调用 .wandh 函数来设置宽高 }
