视口元标记与媒体查询？

Question

我很想知道,为平板电脑,桌面和智能手机优化您的网站,最好使用什么:媒体查询或Viewport元标记？看代码:

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

VS

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 1

两者都是必要的.

媒体查询用于为不同的设备提供不同的css,就像不同设备的if条件一样.

视口元标记用于设置告诉设备根据此标记获取宽度.它就像设备的重置一样,如果未使用的设备将根据其默认设置调整布局.

Answer 2

这取决于你想要达到的目标.

如果您只想设计桌面分辨率并让移动浏览器"缩小"并假设像分辨率这样的桌面,那么只能使用视口元标记,将宽度设置为固定值.

如果您想要真正的响应式设计,则应将视口元标记设置为设备宽度,并使用媒体查询来规划不同分辨率的布局,如代码中所示.

Answer 3

我会说每种情况都不同......而且这不是一种情况.你拥有的视口元标记会使网站保持1比1的比例,这在很多情况下是好的.然而,它也设置为用户可扩展的"否" - 这意味着用户将无法放大等...有时ipads和其他设备改变您的网站的方式是最好的...(取决于)

我找到的最好的方法是使用媒体查询并选择2个dirrections之一:

1. 从小做起并积累起来
2. 从大开始,积累下来

拉伸你的浏览器窗口越来越大(或越来越小)然后当网站变得丑陋时,(就在之前)这是你的下一个断点......在那里进行媒体查询......并重复.不要注意所有的设备尺寸 - 这样你就会知道无论出现什么样的新设备等,你都会把它设计得看起来很好看.(当它低于320 /我喜欢只是让网站变成名片///更好地拥有无智能手机的可读信息......)

毕竟...在设备上测试并尝试不同的视口元标记.

有很多关于它的精彩文章...使用"响应式设计"或"自适应"或"RWD"响应式网页设计等关键词.还有祝你好运 !!!