您的位置:首页 > 汽车 > 新车 > 沈阳男科医院收费标准_建站目的_企业营销策划方案范文_外贸seo软文发布平台

沈阳男科医院收费标准_建站目的_企业营销策划方案范文_外贸seo软文发布平台

2024/10/31 17:01:57 来源:https://blog.csdn.net/qkdgz/article/details/142456280  浏览:    关键词:沈阳男科医院收费标准_建站目的_企业营销策划方案范文_外贸seo软文发布平台
沈阳男科医院收费标准_建站目的_企业营销策划方案范文_外贸seo软文发布平台

@media媒体查询

媒体查询入门指南

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</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 class="container"><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' }" class="inner-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 lang="less">
.inner-box {height: 200px;background-color: aqua;
}
</style>

meta标签

 <!-- 对移动设备开启响应式 --><meta name="viewport" content="width=device-width, initial-scale=1.0" />

MDN原文:

name

namecontent 属性可以一起使用,以名 - 值对的方式给文档提供元数据,其中 name 作为元数据的名称,content 作为元数据的值。 在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。

content

此属性包含 http-equivname 属性的值,具体取决于所使用的值。

作用:控制视口的尺寸和缩放。width=device-width 设置视口宽度为设备的宽度,initial-scale=1.0 设置初始缩放比例为 1。

flex和组件库Row/Col栅格的响应式

Element-plus、iView、Ant-Design-Vue等组件库都会有Grid栅格这一栏,右侧分类有响应式布局

在这里插入图片描述

在AntDV的栅格一栏,F12查看元素设置,其利用的了@media媒体查询和flex缩放

响应式布局

参照 Bootstrap 的 响应式设计,预设六个响应尺寸:xs sm md lg xl xxl

在这里插入图片描述

bootstrap中文网-布局-栅格

关于flex: 0 0 25%;

MDN-flex

flex: 0 0 25%flex 布局中的一种简写属性,分别设置了 flex-growflex-shrinkflex-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关键字表示自动填充。

grid+media
@media (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 class="box"><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="" /></div>

grid栅格布局实现:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid 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 class="grid-container"><div class="grid-item">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class="grid-item">2. Proin ac orci eu erat volutpat aliquam.</div><div class="grid-item">3. Integer feugiat diam nec metus cursus, et sagittis mauris laoreet.</div><div class="grid-item">4. Nulla facilisi.</div><div class="grid-item">5. Donec sollicitudin.</div><div class="grid-item">6. Maecenas scelerisque.</div><div class="grid-item">7. Vestibulum et justo sit amet est auctor hendrerit.</div><div class="grid-item">8. 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标签

        <imgsrc="./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>
    

其实这两种实现方案也是“媒体查询“,只不过换了一种写法

字体的响应式方案和特殊的单位

根据实际情况,采用媒体查询和remvw等方式实现

  • font-size: 3rem
  • font-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 / Hlet k1, k2k1 = H / config.sHeightk2 = W / config.sWidthreturn [k2, k1]
}

app.vue

            window.addEventListener('resize', () => {zoom()})

.less

@zoom: 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 函数来设置宽高
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com