搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > Alanbeta > 8 响应式设计

8 响应式设计

Alanbeta 2018-03-01

响应式设计包含三个方面:

  1. 媒体查询:一种CSS语法,可以根据浏览器的特性(屏幕或浏览器容器宽度)提供CSS规则。

  2. 流式布局:使用em或百分比等相对单位设定页面总体宽度,让布局能够随屏幕大小而缩放。

  3. 弹性图片:使用相对单位确保图片再大也不会超过其容器。


媒体查询的实现方式:

  1. @media规则

  2. <link>标签中的media属性


@media  <媒体类型/媒体特性>  {

        <CSS>

}


媒体类型:

  • all:所有设备

  • handled:手持设备(小屏幕、单色、带宽有限)

  • print:分页媒体或打印预览模式下的屏幕

  • screen:彩色计算机屏幕

  • braille:盲文点字触觉反馈设备

  • embossed:盲文分页打印机

  • projection:投影仪

  • speech:语音合成器

  • tv:电视机


任意时刻浏览器窗口中只能使用一种媒体类型。


媒体类型从IE6开始支持,媒体特性从IE9开始支持。


媒体特性:

  1. min-device-width、max-device-width:设备屏幕的尺寸

  2. min-width、max-width:视口的宽度,例如浏览器窗口宽度

  3. orientation(值为portrait和landscape):设备是横屏(landscape)还是竖屏(portrait)


可使用逻辑运算符and、not、or及关键字all、only组合媒体类型和媒体特性,其中only样式可以用来对不支持媒体查询的浏览器隐藏样式表。


在IE8及以下版本的IE浏览器中使用媒体查询可以使用腻子脚本Respond.js.


<link type="text/css" media="媒体类型/媒体特性" href="XXX.css" />


断点(breakpoint):媒体查询起作用的屏幕宽度。

@media screen and (max-width: 640px) {

        /*CSS规则*/

}


1000px的断点适合平板电脑,640px的断点适合智能手机横屏,320px适合智能手机竖屏。


取消iPhone和iPad中“缩小适应”的默认行为(但会引发一个bug):

<meta name="viewpoint" content="width=device-width"; maximunscale=1.0 />


如果网页布局中的所有结构化元素使用的都是auto或者百分比宽度值,则从固定布局转换为流动布局只需要把固定宽度的外包装元素设为百分比宽度。


流动布局:

#wrapper {width: 98%;}


弹性图片:

img {max-width: 100%;}


Safari Mobile中的bug:设备从竖屏旋转到横屏时会导致缩放和重绘问题。


让下拉菜单支持触摸:

.touch nav.menu li ul {

    -webkit-transition: 1s opacity;

    -moz-transition: 1s opacity;

    transition: 1s opacity;

}


触摸屏幕其他地方关闭菜单:

(function(){$(window). on('touchstart', $. noop);})();

 


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《8 响应式设计》的版权归原作者「Alanbeta」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注Alanbeta微信公众号

Alanbeta微信公众号:gh_6622cfd049d1

Alanbeta

手机扫描上方二维码即可关注Alanbeta微信公众号

Alanbeta最新文章

精品公众号随机推荐