变得响应性,第3部分:缩放元素

日博体育app下载- 2015年9月2日星期三

你已经使用媒体查询来软化你以前死板的网页设计, 并为使用智能手机的用户添加了一些漂亮的移动导航功能. 但是你总会遇到一些不会按你需要的方式改变大小的元素. 你现在做什么? 今天,我们将通过讨论一些开发者可以用来缩放页面元素的技术来结束这个日博体育app响应式网页设计的简短系列.

matcha-design-Becoming-Responsive-P3.jpg

图片

最基本的CSS使图像元素可伸缩是简单的:

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

有了此代码, 每个带有“textbox”类的容器中的图像将自动扩展到其容器的全宽度,并相应地设置其高度. 例如, 宽500像素,高300像素的图像, 如果放置在一个250像素宽的元素中, 会缩小到250px x 150px. 如果容器是1000像素宽,图像将膨胀到1000px x 600px.

如果你只是在修修补补, 说, 一个头部图像或英雄图像,图像完全填充了它的父容器, 这就足够了. 但假设你遇到这样的情况:

   

 

在这种情况下, 容器可能比图像更宽(可能更宽), 但图像可能不应该比它本身更大. 如果有必要,缩小规模是可以的,但太大只会造成很大的模糊混乱.

第一个解决方案是添加 max-宽度 CSS:

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

这可以防止图像在任何情况下都不超过60像素宽.

如果您有几个图像,所有不同的宽度? 您可以制定一些CSS规则, 或者你可以使用一个快速的CSS/jQuery组合,使它们都是自我限制的:

CSS

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

jQuery

var宽度;

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

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

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

});

可见性 在某些浏览器中,规则有助于防止全宽图像短暂闪现. 您可能还注意到,此解决方案取决于您的img元素是否具有 宽度 (最好是 高度)属性集,无论如何这是一个很好的实践.

表格,很久以前的网页设计之王,在现代发展中已经被遗弃了. 然而,表格对于显示表格数据仍然很有用(我知道,这是多么令人惊讶). 不幸的是, 表, 尽管他们很灵活, 在非常窄的屏幕上,是否能够达到一些相当硬的宽度限制.

好的一面是,你可以用CSS将表分开,并垂直地堆叠它们的内容:

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

 table th, table td { display: block; }

}

这可能会导致一些非常长的页面, 但这通常比完全崩溃要好, unprofessional-looking网站.

块元素(iframe、画布等.)

像这样调整元素的大小可能相当棘手. 像这样的方块不像图像一样有内置的长宽比. Thus the old “宽度: 100%; 高度: auto;” trick doesn’t work, 因为任何元素的本地高度都是0.

最好的解决方案是将该元素包装在一个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; }

这将“aspect”div设置为iframe的父元素,并将其高度设置为0. 因为元素可以从没有“overflow: hidden;”CSS的容器中流出, 这并不会阻止iframe的显示. iframe被设置为与其父节点一样宽,并移动到其左上角.

但是真正聪明的地方是方面div上的“padding-bottom”. 然而(由于一些神秘的原因)您不能将大多数元素的高度设置为宽度的百分比, 你 可以 在填充时执行此操作. 因此父div将其下方的所有内容都推到页面下方, 精确地为iframe显示正确的高度,而不重叠任何其他东西.

你会注意到“aspect”div中的“45%”是与原始iframe相同的宽高比. 对于不同大小的元素,只需将这个数字设置为(高度/宽度) * 100.

总结起来

使一个现有的网站响应从来都不是容易的. 我们抹茶人花了很长时间来学习我们在这里讨论的技巧, 还有其他几个, 帮助我们的日博体育app提高他们的谷歌搜索排名,并为移动互联网的未来做好准备. 今天日博体育app 来了解我们如何快速、轻松地将贵公司的互联网业务转变为令您感到自豪的业务.

日博体育app下载
日博体育app下载是一家全方位服务的创意机构 网页设计打印身份品牌界面设计视频制作静止摄影 和 运动设计. 利用我们对卓越的热情,多元文化背景,和 获奖 实践, 我们始终如一地提供高品质的, 自定义, 创新的解决方案,以满足日博体育app多样化的市场需求. 欲了解更多信息,请访问 www.MatchaDesign.com.

< / div >

版权所有:日博体育app. 保留所有权利.  隐私政策

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