响应式布局中响应式图片如何处理

2017-01-03 10:11:34来源:作者:xxp132人点击

第七城市
当我们遇到这类型的问题,我们就会思考,怎么样才能做到,用户体验好的方式。
以下介绍几种方式:
1、静态布局(Static Layout)

即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置;
对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。
2、自适应布局(Adaptive Layout)

自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。
你可以把自适应布局看作是静态布局的一个系列。
就是说你看到的页面,里面元素的位置会变化而大小不会变化;
4、响应式布局(Responsive Layout)

分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。
二 响应式布局步骤

1.布局及设置meta标签

当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小,我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。

当你完成当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到和标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="true">

user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

2.通过媒体查询来设置样式media query

media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写
@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }

}

3.设置多种视图宽度

假如我们要兼容ipad和iphone视图,我们可以这样设置:

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}

3.字体设置

到目前为止,开发人员用到的字体单位大部分都是像素,虽然像素在普通网站上是Ok的,但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度,这样才能适应客户端屏幕。
css3引入了新的单位叫做rem,和em类似但对于Html元素,rem更方便使用。

rem是相对于根元素的,不要忘记重置根元素字体大小:
html{font-size:100%;}
完成后,你可以定义响应式字体:
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
不理解rem的童鞋,在这里给大家推荐一篇写的不错的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)
4.响应式设计需要注意的问题

1.宽度不固定,可以使用百分比

#head{width:100%;}
#content{width:50%;}
2.图片的处理
<div >
<img src="img/400.png" srcset="img/400.png 400w,img/800.png 800w,img/1600.png 1600w" />
</div>
可以让我们浏览器会自动选择,以上有一个bug.因为srcset还需要一个属性.sizes如果你不去设置,会自动设置为sizes=100vw,vw是代表视口宽度,100代表的是百分比。
若是一个全景图,在移动端看见很小,代码如下:
<picture>
<source media="(min -width:36em)" srcset="img/800.png 800w">
<source srcset="img/800.png 1600w">
<img src="img/..." />
</picture>
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台