Heim >Web-Frontend >HTML-Tutorial >CSS3响应式布局_html/css_WEB-ITnose

CSS3响应式布局_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:24:45996Durchsuche

响应式布局有哪些优点和缺点

优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低下
  代码累赘,会出现隐藏无用的元素,加载时间加长
  其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果
  一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

1、Media Query

CSS3中的Media Query(媒介查询)Media Query是制作响应式布局的一个利器,使用这个工具,我们可以非常方便快捷的制造出各种丰富的实用性强的界面。根据视窗的大小自动调整布局。**1、通过不同的媒体类型和条件定义样式表规则。**媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面**2、Media能获得的值**设备的宽和高:     device-width,device-height显示屏幕/触觉设备渲染窗口的宽和高: width,heigth显示屏幕/触觉设备设备的手持方向:   orientation(portrait|lanscape) 横向/竖向 画面比例:        aspect-ratio 浏览器的长宽比屏幕比例:        device-aspect-ratio 设备屏幕的长宽比,如4/3,16/9等。视觉媒体:        color 定义每一组输出设备的彩色原件个数,如果不是彩色设备,则值等于0分辨率:          resolution 定义设备的非暴力,如:96dpi,300dpi以上仅仅orientation不支持max,min.**3、可用设备参数名**all       所有设备braille   盲文embossed  盲文打印handheld  手持设备print     文档打印或者打印预览模式projection项目演示(如幻灯片)screen    彩色电脑屏幕tty       固定字母间距的网络媒体,如电传打字机**4、逻辑关键字**only    限定某种设备类型and     逻辑与,连接设备名与选择条件、选择条件1与选择条件2not     排除某种设备(除了什么之外),       设备列表    **5、语法结构及用法**@media 设备名 only (选取条件) not (选取条件) and (设备选取条件), 设备二{sRules}在link中使用@media:<link rel="stylesheet" type="text/css" media="only screen and (max-width: 640px),only screen and (max-device-width: 640px)">    <p>href = “home.css”/> <br> only可以省略,第一个条件是网页的最大宽度是640,第二个条件是设备的最大宽度是640px。 <br> @media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {//code} <br> 电脑屏幕尺寸不小于1024px,并且最大的可见宽度为989px;设备最大宽度为480px,并且横向放置,设备宽度不小于480px,并且小于1024px,竖直放置的设备。 <br> 字符间以空格相连,选取条件包含在小括号内,code为设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔. <br> <strong>6、测试响应式布局</strong> <br> 响应式布局需要在不同的设备上测试,可以使用浏览工具来检验不同尺寸屏幕小的显示效果。帮助你在不同尺寸屏幕下浏览网站效果的工具 - Responsivator http://responsive.d3corp.com/?d3corp.com</p>    <p><strong>7、响应式布局设计</strong></p>    <pre class="sycode">/*浏览器的可视区域不小于980px*/  @media screen and (min-width:980px){    .head{width:100%; height:70px; }    .head #logo{position:fixed; top:0px; left:50px;}    .head  nav{ width:870px;background:#fff;height:70px; margin:0 auto;}    .head  nav a{ width:100px; height:40px; margin:15px 0px; display:inline-block; }    }/*浏览器的可视区域在640px和980px之间*/ @media screen and (min-width:640px) and (max-width:980px){    .head{width:70px;height:870px;}    .head  nav{ width:70px;background:#fff;height:870px;margin-top:20px;}    .head  nav a{ width:70px; height:40px; margin:15px 0px; display:inline-block; }    }/*浏览器的可视区域小于640px*/ @media screen and (max-width:640px){    .head{width:256px; height:256px;position:fixed; bottom:20px; left:20px;}    .head #logo{position:absolute; top:0px; left:0px; right:0; bottom:0; padding:auto; margin:auto;}    .head  nav{width:256px; height:256px;background-color:rgba(0,0,0,0.6); border-radius:50%; transform:scale(0.1) rotate(-270deg); opacity:0; transition:all 500ms;margin-top:0px;}    .head  nav a{display:block; width:40px;height:40px;border-radius:50%; position:absolute;margin-left:-20px; margin-top:-20px; }

为了更好的显示效果,往往还要格式化一些CSS属性的初始值,如:

 /* 禁用iPhone中Safari的字号自动调整 */  html {  -webkit-text-size-adjust: none;  }  /* 设置HTML5元素为块 */  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  display: block;  }

2、利用meta标签对viewport进行控制

移动设备默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。
设置width为decice-width;

 <meta name="viewport" content="width=device-width; initial-scale=1.0">

 content中参数设置:
  width – viewport的宽度
  height – viewport的高度,这个属性很少使用
  initial-scale – 初始的缩放比例
  minimum-scale – 允许用户缩放到的最小比例
  maximum-scale – 允许用户缩放到的最大比例
  user-scalable – 用户是否可以手动缩放 no或者yes
  最后对于在IE浏览器中不支持media query的情况,我们可以使用Media Query JavaScript来解决,只需要在页面头部引用css3-mediaqueries.js即可。示例:

IE8及低版本浏览器不支持CSS3 media queries的解决方法
另外关于IE8低版本兼容问题可参考:

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn