媒体查询视口viewport和meta标签flex布局

Posted 2023-04-01 AI大胜

什么是响应式Web 设计

早年设计 Web 时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。

在考虑好同一个网页在不同尺寸屏幕的布局呈现方式后，然后进行编码实现这些呈现方式，即让网站的网页效果（布局效果）能够在不同屏幕大小，如电脑、平板、移动设备上都有清楚且接近的显示效果，而不至于为每个设备屏幕情况都要写一个页面或网站。这整个过程就是响应式web设计。

最初，响应式设计是从“桌面”、固定宽度设计开始的。然后，到了小屏幕上，内容会重排，或者根据情况隐藏部分内容。可是，随着时间推移，人们发现，还是采用相反的设计思路更好，即先为小屏幕设计内容、样式，然后再向大屏幕扩展。

媒体查询

CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用。

换种说法，媒体查询确实具有在CSS中实现条件逻辑的能力。使用媒体查询，其中的样式只在某些条件具备的情况下才会被应用。

比如，可以根据视口宽度、屏幕宽高比和朝向（水平还是垂直）等，只用几行CSS代码就改变内容的显示方式。

可以将其想象为对浏览器的询问。如果浏览器回答“是”，那么就会应用对应的样式表。如果浏览器回答“否”，就不会应用。

媒体：指传播信息的工具，如报刊、广播、电视等。

媒体查询得到了广泛实现。除了古老的IE（8及以下版本），几乎所有浏览器都支持它。

媒体查询的语法

@media mediatype and|not|only (media feature) 
    CSS-Code;

mediatype 的可选值：

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。

media feature 即媒体功能特征，在响应式设计中，媒体查询中用得最多的特性是视口宽度（width）。

下面是部分特性，完整的请查阅相关文档：CSS3 @media查询 | 菜鸟教程 (runoob.com)

• width：视口宽度。
• height：视口高度。
• orientation：设备方向是水平还是垂直。
• resolution：屏幕或打印分辨率，比如min-resolution: 300dpi。也可以接受每厘米多少点，比如min-resolution: 118dpcm。
• ……

1、在CSS中使用

body 
    background-color: grey;

@media screen and (min-width: 320px) 
  body 
    background-color: green;
  

@media screen and (min-width: 550px) 
  body 
    background-color: yellow;
  

注意，查询默认 all and, 除非你真的想针对特定的媒体类型应用样式，否则就不要写screen and了。

直接：

@media (min-width: 550px) 
  body 
    background-color: yellow;
  

2、在link标签中使用

<link rel="stylesheet" type="text/css"
  href="stylesheets/mobile.css" media="only screen and (max-device-width: 480px)">

3、将多个媒体查询穿在一起

<link rel="stylesheet" media="screen and (orientation: portrait) and
(min-width: 800px), projection" href="800wide-portrait-screen.css" />

css中，长度可以用px、em、rem。假设你想在800像素处设置断点，但又想用em单位，可以用800除以16，就是50em。

4、CSS文件中，@import与媒体查询

可以在使用@import导入CSS时使用媒体查询，有条件地向当前样式表中加载其他样式表。比如以下代码会导入样式表phone.css，但条件是必须是屏幕设备，而且视口不超过360像素：

@import url("phone.css") screen and (max-width:360px);

记住，CSS中使用@import会增加HTTP请求（进而影响加载速度），因此请慎用。

如果浏览器要加载的响应式页面通过不同的媒体查询链接了4个不同的样式表（分别为不同视口的设备应用样式），那它就会下载4个CSS文件，但在渲染页面之前，它只会解析那个针对当前视口大小的样式表。

媒体查询代码不建议单独写个文件

除非在极端情况下，否则我都建议在既有的样式表中写媒体查询，跟常规的规则写在一起。即对某块元素，如果不同尺寸的样式不同，那么这几个对同一元素的样式处理会先后连在一起写，而不会在某个媒体查询里集中写多个选择器的样式。前者虽然看着有些繁琐，重复，但是容易维护，且压缩后代码大小变化并不大。

视口（viewport）和 <meta> 标签

浏览器中用于呈现网页的区域叫视口（viewport）。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。

为了利用媒体查询，应该让小屏幕以其原生大小来显示网页，而不是先在980像素宽的窗口中渲染好，让用户去放大或缩小。2007年，苹果在发布iPhone的时候，就引入了一个针对视口的meta标签。目前安卓机和其他手机基本都支持这个标签了。这个用于视口的meta标签，是网页与移动浏览器的接口。网页通过这个标签告诉移动浏览器，它希望浏览器如何渲染当前页面。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

• width=device-width告诉浏览器页面的宽度等于设备的宽度，
• user-scalable=no完全禁止用户缩放，
• initial-scale=1.0表示按页面内容实际大小显示。

下面再在看几个示例：

<meta name="viewport" content="width=device-width">

上面这个<meta>标签想表达的意思是：按照设备的宽度（device-width）来渲染网页内容。

下面的例子允许用户最大将页面放大到设备宽度的三倍，最小可以将页面缩小至设备宽度的一半。

<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />

甚至可以完全禁止用户缩放。虽然允许缩放是一个重要的无障碍特性，但现实当中很少有必要这么做：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

大多数情况下，都可以使用这个meta标签：

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

基本上所有浏览器默认的文本大小都是16像素，因此用像素值除以16就可以得到rem值。

为了更好的理解viewport，推荐这篇文章：viewport 深入理解 | 菜鸟教程 (runoob.com)

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

属性	解释
width	设置layout viewport 的宽度，为一个正整数，或字符串"device-width"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

移动端浏览器默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。

如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于设备的屏幕宽度的。

flex布局

1、 某块元素不要用固定宽度了，用固定百分比，即块的宽度除以父级元素宽度
2、 Flexbox有4个关键特性：方向、对齐、次序和弹性。
3、关于Flexbox的对齐，最重要的是理解坐标轴。有两个轴，“主轴”和“交叉轴”。

重要：学习flex一定先认真看下这篇教程：https://www.runoob.com/w3cnote/flex-grammar.html

容器、主轴，交叉轴

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

关于Flexbox的对齐，最重要的是理解坐标轴。有两个轴，“主轴”和“交叉轴”。这两个轴代表什么取决于容器的flex-direction属性。比如设置为row（默认），则主轴就是横轴，而交叉轴就是纵轴。

反之，如果是column，则主轴就是纵轴，而交叉轴为横轴。下图展示了方向为row时的情况：

以下6个属性设置在容器上。

• flex-direction：用于设置主轴的方向。它可能有4个值。

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap：定义了如果一条轴线排不下，如何换行。
  值为：nowrap | wrap | wrap-reverse之一

• flex-flow ：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

• justify-content：定义了项目在主轴上的对齐方式。

• align-items：定义项目在交叉轴上如何对齐。

• align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。？？？

主轴的对齐

控制沿Flexbox主轴对齐的属性是justify-content，该属性应用在容器上，它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

交叉轴的对齐

控制交叉轴对齐的属性是align-items，该属性应用在容器上，它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

给伸缩项（flex item）定义宽度

除了width，还可以通过flex属性来定义宽度，该属性用在容器内的元素上。

这里的flex实际上是三个属性合体的简写：flex-grow、flex-shrink和flex-basis。默认值为0 1 auto。后两个属性可选。另外，flex属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如：flex: 0 0 50px的意思是，这个伸缩项既不伸也不缩，基准为50像素（即无论是否存在自由空间，都是50像素）。

可以把flex属性想象成设置比例。如果每一项都设置为1，则它们会占用相等的空间：

align-self 属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

在确定哪些平台和浏览器版本支持什么CSS特性时，建议参考这个网站：http://caniuse.com

更新于：2023-4-1

元视口仅适用于手机？

【中文标题】元视口仅适用于手机？

【英文标题】：Meta viewport ONLY for phones?

【发布时间】：2013-08-10 15:49:36

【问题描述】：

有没有办法为手机设置通用响应元视口（）？我们有一个网站，没有meta 标签，缩小，在 7 英寸和更大的平板电脑上看起来不错，纵向和横向，但在较小的设备上有点太不方便了。

所以要让它在手机上按我们想要的方式工作，我必须使用<meta name="viewport"> 标签，然后强制一些媒体查询来修复更大设备上的问题。

有没有办法在手机上设置meta 标签，而在较大的设备上只设置设备默认的缩小视图？

谢谢！丰富

【参考方案1】：

你的意思是<meta name="viewport">吗？

<meta name="viewport" content="width=device-width, user-scalable=no" />    

如果是这样，请尝试在<head> 中添加以下脚本（取自并改编自here）：

if(navigator.userAgent.match(/Android/i)
  || navigator.userAgent.match(/webOS/i)
  || navigator.userAgent.match(/iPhone/i)
  || navigator.userAgent.match(/iPad/i)
  || navigator.userAgent.match(/iPod/i)
  || navigator.userAgent.match(/BlackBerry/i)
  || navigator.userAgent.match(/Windows Phone/i)) 
    document.write('<meta name="viewport" content="width=device-width, user-scalable=no" />');

这将检测用户代理是否指示浏览器是移动的，并根据需要写入元视口。

【讨论】：

如果我的回答有帮助，请投票并通过单击左侧的勾号将其标记为答案。这样做可以让其他人知道您的问题已得到解答，并且您和我都会获得声誉。每个人都赢了！

这不能回答问题，是吗？这仍将针对 ipad 和 Android 平板电脑。

【参考方案2】：

实际上，这可能是一个更好的解决方案： 在 meta viewport 标签之后添加一个脚本，如果屏幕大于指定值，该脚本将更改该值。

<meta id="testViewport" name=viewport content="width=device-width, initial-scale=1">
<script>
if (screen.width > 590) 
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=980');

</script>

此脚本可能有多种变体。例如，您可以将实际屏幕宽度设置为视口，而不是固定值。

【参考方案3】：

要实现这一点，请不要使用 <meta> 标记，也不要在常规 .css 文件中使用 @media 查询。

改为使用这种标签：

<link rel="stylesheet" media="only screen and (max-device-width: 320px)" href="wp-content/themes/thestory/css/320.css">

并在单独的 .css 文件（如本例中的 320.css）中为这些设备创建样式。