CSS-使用媒体查询来缩放内容 [英] css - using media queries to scale content

问题描述

我想知道是否有一种方法可以使用媒体查询来缩放divs内容(而不是整个浏览器的内容).我有一个可变宽度的站点，当窗口调整大小超过某个点时，其中的某些内容会埋在其他内容的后面，并且我希望能够缩放它.

我有两个问题-一个问题是我正在使用ems作为字体，但是字体不会随着浏览器调整大小而缩放.他们应该吗?

第二，我要调整大小的div的某些内容是图像-因此，除了使用某些浏览器不支持的css scale属性外，我不确定如何缩放那些内容. /p>

有人可以推荐最简单的方法来解决这个问题吗?我已经附上了该网站上发生的事情的屏幕截图.

解决方案

我相信昨天已经触及了其中一部分:

要根据屏幕调整字体大小，我相信您需要视口大小的字体:

vw vh and vmin.

http://css-tricks.com/viewport-sized-typography/

要调整图像大小，只需为每个屏幕尺寸指定相应的尺寸.您还可以根据屏幕尺寸或任何CSS属性来设置特定的字体大小:

/* mobile phones */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* This is where you would specify the width and hight of your images */
}

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

这里还有更多内容: Twitter Bootstrap的响应背景?

I'm wondering if there is a way to use media queries to scale a divs contents (not the entire browser's contents). I have a fluid width site in which, when the window resizes past a certain point, some of the content gets buried behind some other content, and I'd like to be able to scale it.

I have two issues - one is that I'm using ems for the fonts, but the fonts don't scale as the browser resizes. Are they supposed to?

Second, some of the contents of the div I'd like to resize are images - so I'm not sure how to scale those other than to use a css scale property which wouldn't be supported on some browsers.

Can anyone recommend the easiest way to handle this? I've attached a screenshot of what happens on the site.

解决方案

I believe part of this was touched on yesterday:

To resize your fonts according to the screen I believe you want viewport sized fonts:

vw vh and vmin.

http://css-tricks.com/viewport-sized-typography/

For resizing the images, just specify sizes accordingly for each screen size. You can also set specific font sizes according to screen size, or any CSS property for that matter:

/* mobile phones */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* This is where you would specify the width and hight of your images */
}

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

There's more here: Responsive backgrounds with Twitter Bootstrap?

这篇关于CSS-使用媒体查询来缩放内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！