【亚洲必赢官网】动用CSS达成弹性视频html5案例实践,Queries落成响应式设计

响应式设计的5个CSS实用技巧

2012/05/26 · CSS · 1
评论 ·
CSS

英文原文:5 Useful CSS Tricks for Responsive
Design ,翻译:Viven
Chen

正如本身在科目响应式Web设计三步走中档所讲的,响应式的Web设计其实并简单,不过要让要素在布局切换时可以平展对接就相比较考验技巧了。以后自我分享在编码时常用的多个CSS技巧并举例表达。那些技能都是选择简便的CSS属性,如min-width、max-width、overflow
和相对属性值,可是那一个属性在响应式设计中表达着很大的效果。

1. 响应式Video
(demo)

响应式video的CSS技巧是由tjkdesign.com发现的。我事先的一篇作品介绍过它,你可以在这里读书。响应式视频会适应它的容器宽度。

CSS

.video { position: relative; padding-bottom: 56.25%; height: 0;
overflow: hidden; } .video iframe, .video object, .video embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
 
.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

2. Min & Max Width
(demo)

品质设置了成分的最大幅面。其目标是严防成分“越线”。

最大幅面容器

在底下的例证当中,我定义了container的涨幅是800px(译注:假如它的父容器不小于800px),然则不当先父容器的90%。

CSS

.container { width: 800px; max-width: 90%; }

1
2
3
4
.container {
    width: 800px;
    max-width: 90%;
}

CSS

<strong>响应式图片</strong>

1
<strong>响应式图片</strong>

使用max-width:100% and height:auto,图片能自适应父容器的幅度。

CSS

img { max-width: 100%; height: auto; }

1
2
3
4
img {
    max-width: 100%;
    height: auto;
}

上述的CSS在IE7和IE9都能起作用,可是IE8不识别。可以行使width:auto来修复。你可以行使针对IE8的基准CSS,可能选拔下边的IE
hack:

CSS

@media \0screen { img { width: auto; /* for ie 8 */ } }

1
2
3
4
5
@media \0screen {
  img {
    width: auto; /* for ie 8 */
  }
}

Min-Width

相反,它设置了成分的细微宽度。在底下的例证里面,min-width用来定义input的肥瘦,幸免input被拉伸的时候变得过小。

亚洲必赢官网 1
3. 相对值
(demo)

响应式设计中,使用相对值可以简化CSS和立异布局。上边举例表明。
相对Margin
下边的例子是评论列表,使用相对margin来安装。我用百分比的值而不用相对的像素值来隔开子列表。上边的截图可以看来,假使用像向来定义,子列表会变得尤为小。
亚洲必赢官网 2
对峙字体大小
以绝对值(如em或%)设置的字体、行高、外边距可以被接二连三。例如,只要不难地改变父级成分的字体大小,那么它的子元素的字体大小也能随着更改。
亚洲必赢官网 3
相对内边距
下边的截图申明了针锋相对的百分比边距比相对的固定像素边距更好。左侧的器皿浮现了使用像素边距的不平衡。左侧的器皿则浮现了对容器空间的足够利用。
亚洲必赢官网 4
4. Overflow:hidden Trick 技巧
(demo)

如我在在此以前的篇章所说的,可以行使overflow属性来解除浮动。那个技术很实用。应用overflow:hidden,可以对上一个要素清除浮动,保障当前容器的剧情能正常显示。
亚洲必赢官网 5
5. Word-break
(demo)

我事先也说过word-wrap
属性。可以在强制长文本(如长URL链接)换行。

CSS

.break-word { word-wrap: break-word; }

1
2
3
.break-word {
        word-wrap: break-word;
}

亚洲必赢官网 6

 

 

赞 5 收藏 1
评论

亚洲必赢官网 7

小说来源:

点评:当我编码Elemin
Theme(我方今布置的一个响应式的站点)的时候,我遇上的一个跳帧就是,怎样能让嵌入式的视频在尺寸变化上变得更为灵活;通过几钟头的搜寻素材和试验,我最终找到了搞定办法

一、CSS1.基于分化浏览器暗许设置差距,页面可先导化样式,调整成一致

  今后显示器分辨率的限量很大,从 320px (一加) 到 2560px
(大型显示器),甚至更大。用户也不只是利用台式电脑访问web站点了,他采纳手机、台式机电脑、GALAXY Tab。所以古板的安装网站宽度为固定值,已经不可以知足急需了。web设计须求适应那种新必要,页面布局必要可以根据访问设备的不等分辨率自动举行调整。本学科将会向你介绍,怎样使用html5和CSS3
Media Queries落成跨浏览器的响应式设计。

当本身编码Elemin
Theme(我近年设计的一个响应式的站点)的时候,我赶上的一个跳帧就是,怎么着能让嵌入式的摄像在尺寸变化上变得进一步灵活。使用max-width:100%
和height:auto可以让html5的video标签很好的干活,但是那么些解决方案不适用于iframe
大概object标签的内嵌代码。通过几钟头的摸索素材和实验,我最后找到了化解办法。当你在举办响应式设计的时候,这一css技巧能派上用场。

2.IE8及以下不帮衬CSS3

  demo预览地址:

灵活的html5 video标签
选取html5的video,可以因此设置max-width:100%让她变得灵活。前边的介绍中,已经关系他不适用于常用的iframe和object中的内嵌代码。

3.IE6不帮助png格式图片

  demo下载地址:

代码如下:

4.IE盒模子跟正规盒模型不相同,IE下content部分含有padding+border,即设置width后,再安装padding等属性,宽度会大增

  第二回运行

video {
max-width: 100%;
height: auto;
}

5.a标签中如若有button,
在IE下无法跳转到herf链接,而现代浏览器可以,解决:IE下button设置onclick=”window.location.href(‘#’),现代浏览器设置a中href属性即可。199)
? “200px” : “auto”;//写成函数来运行function set马克斯Height(elementId,
height){var container =
document.getElementById(elementId);container.style.height =
(container.scrollHeight > (height – 1)) ? height + “px” :
“auto”;}//函数示例set马克斯Height(‘container1’,
200);set马克斯Height(‘container2’, 500);

  在开端以前,大家可以查看 最终demo
来查阅最后效果。调整你浏览器的大小,我们得以看看页面会依照视窗的轻重缓急活动调整布局。

灵活的Object & Iframe 内嵌摄像
那个技能万分简单,你需求为video添加一个<div>容器,并且将div的padding-bottom属性值设置在50%到60%之内。然后设置子元素(ifame恐怕object)的width和height为100%,并且利用相对化定位。那样会迫使内嵌对象活动伸张到最大。
CSS

6.IE hasLayout掀起的IE6突显不正常BUG

亚洲必赢官网 8

代码如下:

解决办法:设置height,width等属性可激活该属性,推荐设置zoom:1;

 更加多例子

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
亚洲必赢官网,.video-container object,
【亚洲必赢官网】动用CSS达成弹性视频html5案例实践,Queries落成响应式设计。.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

7.IE6双边距BUG

你可以访问下边的地点,查看越来越多相关例子: WordPress
themes。我布置了如下media queries: Tisa, Elemin, Suco, iTheme2, Funki,
Minblr, 和 Wumblr。

HTML

要素设置浮动且又设置同样方向的外地距时,会生出双倍的margin边距

  概述

代码如下:

解决办法:1.安装 display:inline; 2.选用IE6 hack _margin-left:
实际距离/2px;

  默许处境下,页面容器的大幅度是980px,这些尺寸优化了不止1024px的分辨率。Media
query用来检查 viewport
宽度,倘若低于980px他会变成窄屏显示方式,页面布局将会以流动的升幅代替固定宽度。如果viewport
小于650px,他会成为mobile彰显方式,内容、侧边栏等情节会变成单独列布局格局,他们的宽度占满屏幕宽度。亚洲必赢官网 9

<div class=”video-container”>
<iframe
src=””
width=”800″ height=”450″ frameborder=”0″></iframe>
</div>

8.IE6 hasLayout 搭架子难点

 HTML代码 

在固定宽度下促成灵活性
假诺界定了视频的拉长率,那么大家须要一个附加的<div>容器包裹video,并为div设置一定宽度和max-width:100%。
CSS

(1)拥有布局的元素不会减少

 在那边,我不会介绍下边html代码中的细节。上面是布局页面的主框架,我们有一个“pagewrap”的器皿包装了”header”,
“content”, “sidebar”, 和 “footer”。

代码如下:

(2)布局成分对转移进行机动清理

  1. <div id=”pagewrap”>
  2.     <header id=”header”>
  3.         <hgroup>
  4.             <h1 id=”site-logo”>Demo</h1>
  5.             <h2 id=”site-description”>Site
    Description</h2>
  6.         </hgroup>
  7.         <nav>
  8.             <ul id=”main-nav”>
  9.                 <li><a
    href=”#”>Home</a></li>
  10.             </ul>
  11.         </nav>
  12.         <form id=”searchform”>
  13.             <input type=”search”>
  14.         </form>
  15.     </header>
  16.    
  17.     <div id=”content”>
  18.         <article class=”post”>
  19.             blog post
  20.         </article>
  21.     </div>
  22.    
  23.     <aside id=”sidebar”>
  24.         <section class=”widget”>
  25.              widget
  26.         </section>
  27.                         
  28.     </aside>
  29.     <footer id=”footer”>
  30.         footer
  31.     </footer>
  32.    
  33. </div>

.video-wrapper {
width: 600px;
max-width: 100%;
}

(3)相对固定的因素没有布局

复制代码

HTML

(4)在富有布局的要素之间异地距不叠加

HTML5.js

代码如下:

(5)在并未布局的块级连接上,单击区域只覆盖文本

  请留意,我在demo中利用了html5标签,可是IE9此前IE浏览器不接济<header>,
<article>, <footer>,
<figure>等html5新标签。可以在html文档中添加 html5.js
文件将解决这一标题。

<div class=”video-wrapper”>
<div class=”video-container”>
<iframe
src=””
width=”800″ height=”450″ frameborder=”0″></iframe>
</div>
<!– /video –>
</div>
<!– /video-wrapper –>

(6)在滚动时,列表项上的背景图片间歇性的显得和没有

  1. <!–[if lt IE 9]>
  2.     <script
    src=”;
  3. <![endif]–>

兼容性
那一个技术支持具有的浏览器,包蕴:Chrome, Safari, Firefox, Internet
Explorer, Opera, 魅族 和 苹果平板。

9.IE原则注释<!–[if lt(小)/gt(大) IE 6]>    
<![endif]–>

复制代码

10.IE6奇数难题

CSS
  安装html5成分为块状成分

1)字体大小为奇数之边框高度少1px

  下边的css将会把html5的要素(article, aside, figure, header, footer
等)设置为块成分。

化解方法:字体大小设置为偶数或line-height为偶数

  1. article, aside, details, figcaption, figure, footer, header, hgroup,
    menu, nav, section {
  2.     display: block;
  3. }

2)line-height,文本垂直居中差1px

复制代码

缓解格局:padding-top代替line-height居中,或line-height加1或减1

css主体结构

3)与父标签的大幅度的奇偶差其余居中造成1px的距离

  在此处我也不会解释css文件的底细。页面主容器“pagewrap”的幅度被装置为980px。header被装置为定点中度160px。“content”的肥瘦为600px,靠左浮动。“sidebar”宽度设置为280px,靠右浮动。

缓解格局:假使父标签是奇数宽度,则子标签也用奇数宽度;借使是父标签偶数大幅度,则子标签也用偶数宽度

  1. #pagewrap {
  2.     width: 980px;
  3.     margin: 0 auto;
  4. }
  5. #header {
  6.     height: 160px;
  7. }
  8. #content {
  9.     width: 600px;
  10.     float: left;
  11. }
  12. #sidebar {
  13.     width: 280px;
  14.     float: right;
  15. }
  16. #footer {
  17.     clear: both;
  18. }

11.之中盒模型超出父级时,父级被撑大

复制代码

化解办法:父标签使用overflow:hidden

Step 1 Demo

12.line-height暗中同意行高bug

  大家得以经过demo查看当前效劳。那时大家还一向不采用 media
queries,调整浏览器宽度,页面布局也不会发生变化。
CSS3 Media Query

解决格局:line-height设值

  你可以经过《HTML5实施 — CSS3 Media Queries》了解愈来愈多音讯。

13.行标签之间会有一小段空白

  包含 Media Queries Javascript文件

缓解方式:float或结构并排(可读性差,不指出)

  IE8和后边的浏览器不协助CSS3 media
queries,你能够在页面中添加css3-mediaqueries.js来化解这一个标题。

14.标签中度无法小于19px

  1. <!–[if lt IE 9]>
  2.     <script
    src=”;
  3. <![endif]–>

搞定措施:overflow: hidden;

复制代码

15.左浮成分margin-bottom失效

包含 Media Queries CSS

化解方法:突显设置中度 or
父标签设置_padding-bottom代替子标签的margin-bottom or
再放个标签让父标签浮动,子标签

  创设media query所需的css,然后在页面中增加引用。

margin- bottom,即(margin-bottom与float差别时成效于一个标签)

  1. <link href=”media-queries.css” rel=”stylesheet”
    type=”text/css”>

16.img于块成分中,底边多出空白

复制代码

解决措施:父级设置overflow: hidden; 或 img { display: block; } 或
_margin: -5px;

Viewport小于 980px(流动布局)

17.li之间会有距离

  当viewport小于980px的时候,将会利用上边的条条框框:

焚林而猎办法:float: left;

  • pagewrap = 宽度设置为 95%
  • content = 宽度设置为 60%
  • sidebar = 宽度设置为 30%

18.块因素中有文字及右浮动的行成分,行成分换行

  tips:使用百分比(%)可以使容器变为不定点的。

解决方法:将行成分置于块成分内的文字前

  1. @media screen and (max-width: 980px) {
  2.     #pagewrap {
  3.         width: 95%;
  4.     }
  5.     #content {
  6.         width: 60%;
  7.         padding: 3% 4%;
  8.     }
  9.     #sidebar {
  10.         width: 30%;
  11.     }
  12.     #sidebar .widget {
  13.         padding: 8% 7%;
  14.         margin-bottom: 10px;
  15.     }
  16. }

19.position下的left,bottom错位

复制代码

化解办法:为父级(relative层)设置宽高或抬高*zoom:1

Viewport小于 650px(单列布局)

20.子级中有设置position,则父级overflow失效

  当viewport小于650px的时候,将会利用下边的条条框框:

缓解格局:为父级设置position:relative

  • header = 设置中度为 auto
  • searchform = 重新安装 searchform 的职位 5px top
  • main-nav = 设置岗位为 static
  • site-logo = 设置岗位为 static
  • site-description = 设置岗位为 static
  • content = 设置宽度为 auto (这会使容器宽度变为fullwidth)
    ,并且摆脱浮动
  • sidebar = 设置宽度为 100%,并且摆脱浮动

21.CSS选用器区分

  1. @media screen and (max-width: 650px) {
  2.     #header {
  3.         height: auto;
  4.     }
  5.     #searchform {
  6.         position: absolute;
  7.         top: 5px;
  8.         right: 0;
  9.     }
  10.     #main-nav {
  11.         position: static;
  12.     }
  13.     #site-logo {
  14.         margin: 15px 100px 5px 0;
  15.         position: static;
  16.     }
  17.     #site-description {
  18.         margin: 0 0 15px;
  19.         position: static;
  20.     }
  21.     #content {
  22.         width: auto;
  23.         float: none;
  24.         margin: 20px 0;
  25.     }
  26.     #sidebar {
  27.         width: 100%;
  28.         float: none;
  29.         margin: 0;
  30.     }
  31. }

IE6不辅助子选用器;先针对IE6使用正规声明CSS拔取器,然后再用子拔取器针对IE7+及其它浏览器。

复制代码

/* IE6 专用 */

Viewport小于 480px

.content {color:red;}

  下边得css是为了酬答小于480px屏幕的景象,iphone横屏的时候就是那一个涨幅。

/* 其余浏览器 */

  • html = 禁用文字大小调整。
    暗中认同情形,iphone增大了字体大小,这样更有益阅读。你可以动用
    -webkit-text-size-adjust: none; 来废除那种设置。
  • main-nav = 字体大小设置为 90%

div>p .content {color:blue;} –>

  1. @media screen and (max-width: 480px) {
  2.     html {
  3.         -webkit-text-size-adjust: none;
  4.     }
  5.     #main-nav a {
  6.         font-size: 90%;
  7.         padding: 10px 8px;
  8.     }
  9. }

22.IE6背景闪烁

复制代码

比方你给链接、按钮用CSS
sprites作为背景,你恐怕会意识在IE6下会有背景图闪烁的风貌。造成这一个的缘故是出于IE6没有将背景图缓存,每一遍触发hover的时候都会重复加载,可以用JavaScript设置IE6缓存这个图片:

弹性的图纸

document.execCommand(“BackgroundImageCache”,false,true);

  为了让图片尺寸变得尤为弹性,可以概括的丰裕 max-width:100% 和
height:auto。那种艺术在IE7中健康办事,无法在IE8中工作,须要采取width:auto\9 来缓解这几个题材。

23.很小中度

  1. img {
  2.     max-width: 100%;
  3.     height: auto;
  4.     width: auto\9; /* ie8 */
  5. }

IE6
不帮忙min-height属性,但它却觉得height就是细微中度。解决方法:使用ie6不襄助但其余浏览器帮忙的性子:

复制代码

#container {min-height:200px; height:auto !important; height:200px;}

弹性的放置摄像

24.最大惊人

  为了使嵌入视频也变得特别弹性,也可以应用方面的主意。不过不知底如何原因,max-width:100%
在safari浏览器中不或者健康的在停放资源中行事。大家必要选取width:100%
来替代他。

//直接运用ID来改变成分的最大中度

  1. .video embed,
  2. .video object,
  3. .video iframe {
  4.     width: 100%;
  5.     height: auto;
  6. }

var container = document.getElementById(‘container’);

复制代码

container.style.height = (container.scrollHeight > 199) ? “200px” :
“auto”;

initial-scale Meta 标签 (iPhone)

//写成函数来运作

  暗许情况下,iphone的safari浏览器会收缩页面,以适应他的显示器。上面的口舌告诉iphone的safari浏览器,使用设备宽度作为viewport的肥瘦,并且禁用initial-scale。

function setMaxHeight(elementId, height){

  1. <meta name=”viewport” content=”width=device-width;
    initial-scale=1.0″>

var container = document.getElementById(elementId);

复制代码

container.style.height = (container.scrollHeight > (height – 1)) ?
height + “px” : “auto”;

终极效果

}

  查看最后的demo,调整浏览器的大小,查看media query
的行为。你也得以采用中兴, 华为平板, 新版Blackberry, 和 Android
来查阅modile版的功用。亚洲必赢官网 10

//函数示例

  总结

setMaxHeight(‘container1’, 200);

可靠的Media Queries Javascript

setMaxHeight(‘container2’, 500);

  可以运用css3-mediaqueries.js来搞定浏览器不帮衬media
queries的难点。

25.100% 高度

  1. <!–[if lt IE 9]>
  2.     <script
    src=”;
  3. <![endif]–>

在IE6下,假设要给成分定义100%冲天,必须求简明概念它的父级元素的惊人,倘使你须求给成分定义满屏的可观,就得先给html和body定义height:100%;

复制代码

26.细微宽度:同max-height和max-width一样,IE6也不支持min-width。

CSS Media Queries

//直接利用ID来改变成分的小小宽度

  这一技艺可以创设自适应的设计,可以依照 viewport
的肥瘦重写布局的css。

var container = document.getElementById(‘container’);

  1. @media screen and (max-width: 560px) {
  2.     #content {
  3.         width: auto;
  4.         float: none;
  5.     }
  6.     #sidebar {
  7.         width: 100%;
  8.         float: none;
  9.     }
  10. }

container.style.width = (container.clientWidth < width) ? “500px” :
“auto”;

复制代码

//写成函数来运作

弹性的图纸

function setMinWidth(elementId, width){

  使用max-width:100% 和 height:auto,可以让图片变得更为弹性。

var container = document.getElementById(elementId);

  1. img {
  2.     max-width: 100%;
  3.     height: auto;
  4.     width: auto\9; /* ie8 */
  5. }

container.style.width = (container.clientWidth < width) ? width +
“px” : “auto”;

复制代码

}

弹性的内嵌摄像

//函数示例

  使用width:100% 和 height:auto,可以让内嵌摄像变得尤为弹性。

setMinWidth(‘container1’, 200);

  1. .video embed,
  2. .video object,
  3. .video iframe {
  4.     width: 100%;
  5.     height: auto;
  6. }

setMinWidth(‘container2’, 500);

复制代码

27.最大开间//间接运用ID来改变元素的最大幅面var container =
document.getElementById(elementId);container.style.width =
(container.clientWidth > (width – 1)) ? width + “px” :
“auto”;//写成函数来运行function set马克斯Width(elementId, width){var
container = document.getElementById(elementId);container.style.width =
(container.clientWidth > (width – 1)) ? width + “px” :
“auto”;}//函数示例set马克斯Width(‘container1’,
200);set马克斯Width(‘container2’, 500);

Webkit字体大小调整

28.浮动层错位当内容超出外兼容器定义的小幅时,在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增进而增进。浮动层错位难题在IE6下并未真正令人乐意的化解办法,即便可以应用overflow:hidden;或overflow:scroll;来改进,
但hidden不难造成其余一些难题,scroll会毁掉陈设;JavaScript也无可奈何很好地搞定那么些题材。所以提议是毫无疑问要在布局上幸免那一个问题爆发,使用一个固定的布局如故控制好剧情的大幅度(给内层加width)。

  使用-webkit-text-size-adjust:none,在iphone上禁用字体大小调整。

29.躲猫猫bug在IE6和IE7下,躲猫猫bug是一个要命讨厌的题材。一个撑破了容器的变化元素,假诺在他自此有不转移的内容,并且有局地概念了:hover的链接,当鼠标移到这些链接上时,在IE6下就会触发躲猫猫。化解办法很简单:1.在(这个未变动的)内容之后添加一个2.触发包罗了那些链接的器皿的hasLayout,一个大约的法门就是给其定义height:1%;

  1. html {
  2.     -webkit-text-size-adjust: none;
  3. }

30.相对固定成分的1像素间距bugIE6下的那么些错误是出于进位处理误差造成(IE7已修复),当相对定位成分的父成分高或宽为奇数时,bottom和right会爆发错误。唯一的搞定办法就是给父成分定义明确的高宽值,但对于液态布局尚未两全的化解格局。

复制代码

31.3像素间距bug在IE6中,当文本(或无变化成分)跟在一个变迁的因素之后,文本和这几个转变成分之间会多出3像素的间距。给浮动层添加
display:inline 和 -3px 负值margin给中间的剧情层定义 margin-right
以更正-3px

设置iPhone Viewport 和 Initial Scale

32.IE下z-index的bug在IE浏览器中,定位成分的z-index层级是相持于个别的父级容器,所以会导致z-index出现错误的突显。化解办法是给其父级成分定义z-index,有些情状下还须要定义position:relative。

  上边的语句完结了在iphone中,使用meta标签设置viewport 和 inital
scale。

33.Overflow
Bug在IE6/7中,overflow无法正确的隐藏有相对稳定position:relative;的子成分。化解措施就是给外包容器.wrap加上position:relative;。

  1. <meta name=”viewport” content=”width=device-width;
    initial-scale=1.0″>

34.横向列表宽度bug如若你利用float:left;把

复制代码

好了,明日的教程到此截止。


网站地图xml地图