Becoming Responsive, Part 3: Scaling Elements

Matcha Design - Wednesday, September 2, 2015

You’ve used media queries to soften up 你r previously rigid 网页设计, 和 added some nifty mobile navigation for 你r smartphone-using 自定义ers. But 你 keep running into some elements that just won’t change size the way 你 need them to. 你现在做什么? Today we’ll finish up this brief series on responsive 网页设计 by discussing some techniques a developer 可以 employ to scale page elements.

matcha-design-Becoming-Responsive-P3.jpg

图片

的 most basic CSS to make an image element scalable is straightforward:

.textbox img { 宽度: 100%; 高度: auto; }

有了此代码, every image within a container with the class “textbox” will automatically exp和 to the full 宽度 of its container 和 have its 高度 set accordingly. 例如, an image 500 pixels wide 和 300 pixels tall, if placed within in an element 250 pixels wide, will shrink to 250px x 150px. If the container is 1000 pixels wide, the image will swell to 1000px x 600px.

If all 你’re doing is fixing, 说, a header image or hero graphic where the image completely fills its parent container, 这就足够了. But suppose 你 run into this situation:

   

 

在这种情况下, the container may be wider (possibly much wider) than the image, but the image probably shouldn’t scale any larger than it already is. Scaling down is fine if necessary, but getting too big would just make a big blurry mess.

的 first solution is to add max-宽度 CSS:

.textbox img { 宽度: 100%; 高度: auto; max-宽度: 60px; }

This prevents the image from growing more than 60 pixels wide under any circumstances.

What if 你 have several images, all different 宽度s? You could make several CSS rules, or 你 could use a quick CSS/jQuery combo to make them all self-limiting:

CSS

.textbox img { 宽度: 100%; 高度: auto; 可见性: hidden; }

jQuery

var宽度;

$('.文本框img”).每个(函数(第九){

 宽度= $ ().attr(宽度);

 如果(宽度)(美元).css({'max-宽度': 宽度, '可见性': 'visible'});

});

可见性 rules help prevent a brief flash of the full-宽度 image in some browsers. You might also notice that this solution depends on 你r img elements having their 宽度 (最好是 高度) attributes set, which is good practice anyway.

表, long ago the king of 网页设计, have fallen by the wayside in modern development. Yet 表 still remain useful for displaying tabular data (I know, what a surprise). 不幸的是, 表, 尽管他们很灵活, 可以 hit some pretty hard 宽度 limits on very narrow screens.

On the upside, 你 可以 actually break 表 apart with CSS 和 stack their contents vertically:

@media (max-宽度: 800px) {

 table th, table td { display: block; }

}

This 可以 make for some very long pages, but this is usually preferable to a completely shattered, unprofessional-looking网站.

Block Elements (iframe, 可以vas, etc.)

Resizing elements like this 可以 get pretty tricky. Blocs like these don’t have a built-in aspect ratio the same way images do. Thus the old “宽度: 100%; 高度: auto;” trick doesn’t work, since the native 高度 of any element is 0.

的 best solution is to wrap the element inside a div:

 

然后添加这个CSS:

div.aspect { position: relative; 宽度: 100%; 高度: 0; padding-bottom: 45%; }

iframe { 宽度: 100%; position: absolute; 宽度: 100%; 高度: 100%; left: 0; top: 0; }

然后添加这个CSS:

div.aspect { position: relative; 宽度: 100%; 高度: 0; padding-bottom: 45%; }

iframe { 宽度: 100%; position: absolute; 宽度: 100%; 高度: 100%; left: 0; top: 0; }

This sets the “aspect” div as the parent of the iframe, 和 gives it a 高度 of 0. Since elements 可以 flow out of containers that don’t have the “overflow: hidden;” CSS applied to them, this doesn’t prevent the iframe from displaying. 的 iframe is set as wide as its parent 和 moved to snug up to its top left corner.

But the real clever bit is the “padding-bottom” on the aspect div. While (for somewhat ar可以e reasons) 你 可以’t set the 高度 on most elements as a percentage of the 宽度, 你 可以 在填充时执行此操作. So the parent div pushes everything below it down the page, to exactly the right 高度 for the iframe to appear without overlapping anything else.

You’ll notice that the “45%” in the “aspect” div is the same aspect ratio as the original iframe. For elements with different sizing, just set this number to (高度/宽度) * 100.

总结起来

Making an existing website responsive is never easy. We at Matcha have spent a long time picking up the techniques we’ve discussed here, 还有其他几个, to help our 自定义ers improve their Google search rankings 和 prepare for the mobile future of the Web. 今天国际新利娱乐 to find out how quickly 和 easily we 可以 change 你r company’s Internet presence to something 你 will be proud of.

新利在线娱乐网
Matcha Design is a full-service creative agency specializing in 网页设计打印身份品牌界面设计视频制作静止摄影 和 运动设计. Using our passion for excellence, multi-cultural background, 和 获奖 实践, we consistently provide high-quality, 自定义, innovative solutions to meet the diverse marketing needs of our clients. 欲了解更多信息,请访问 www.MatchaDesign.com.

< / div >

Copyright 2021 Matcha Design, LLC. 保留所有权利.  隐私政策

< / div >< / div > < / div > < / div >
< / div >< / div >