轩枫阁

首页 / Web前端 / CSS / 响应式网页设计- 移动、ipad端开发总结

响应式网页设计- 移动、ipad端开发总结

前言

响应式Web设计(Responsive Web design)的理念是: 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。

1、特殊的meta 标签

现在我们用的智能手机(iOS,Android)的浏览器都是基于webkit内核,由于webkit的浏览器对于html5的支持比较好,所以我们在声明头部的时候最好用html5的声明方式。标签中可以设置具体的宽度(如像素值)或者缩放比例如2.0(设备实际尺寸的两倍)。

:将页面放大到设备实际尺寸两倍显示的meta标签,一般设置1.0

:user-scalable=no可以通过meta标签设置禁止用户缩放页面,user-scalable=yes代表允许

:告诉设备不要将页面中的数字识别为电话号码

2、媒体查询

媒体查询就是判断媒介(对象)类型来实现不同的展现形式,让不同的css作用于不同的媒介类型。

下面列举用不同的媒介类型引用不同的css样式

方式1

:当设备的视口宽度小于900px时候,设置body的背景色为#666

:当设备的视口宽度在400px-900px之间时候,设置body的背景色为#666

方式2

注:当设备的视口宽度在100px-500px之间时候,调用one.css 注:当设备的视口宽度在500px-900px之间时候,调用two.css

方式3:

:当设备的视口宽度小于900px时,引用phone.css

创建媒体查询时,最常用的是设备的视口宽度(width)和屏幕宽度(device-width),常用的还有:

  • width:视口宽度
  • height:视口高度
  • device-width:渲染表面的宽度(对我们来说,就是设备屏幕的宽度)
  • device-height:渲染表面的高度(对我们来说,就是设备屏幕的高度)
  • orientation:检查设备处于横向还是纵向

3、关于调试响应式网页布局

以下2种方式可以方便快速调试响应式网页布局:

方式1:拖动浏览器窗口大小宽度或者高度

方式2:Dreamweaver 多屏预览功能

4、字体大小单位

响应式web设计一般用em作为字体的单位,em是相对单位,em相对的基准点就是浏览器的字体大小,用em来写的话,就可以解决ctrl+,ctrl-时造成的页面错乱问题。

:浏览器默认字体为16px, 1em = 16px

5、使用css3

由于webkit的浏览器对于html5的支持比较好,所以我们尽可能的用css3去实现圆角、阴影之类的特效…

当我们想要一个元素100%显示,又必须有一个固定的padding-left/padding-right,还有1px的边框,怎么办?

这个时候,css3的box-sizing就派上用场了…

运用以上5点,可以很轻松的让页面自适应不同的设备屏幕宽度。

6、拥抱流式布局

如果针对已知的特定访问设备,可以单独使用媒体查询来制作理想的设计效果,我们已经见过专门适配iPad有多简单。

但是这种策略有严重的缺陷,换句话说,它不能适应未来的变化。目前的情形是,页面捕捉到媒体查询设置的断点,然后布局发生变化。但在捕捉到下一个视口断点之前,页面静止不变。我们需要比这更好的策略。

针对各种视口的排列组合编写对应的CSS样式,无法兼容未来可能出现的设备;而一个完美的设计,往往能在一定程度上适应未来的发展。在这点上我们目前的解决方案尚不完备。

目前的效果更像是一个自适应设计,而不是我们想要的真正的响应式设计。我们的设计应该在突变之前保持灵动。要做到这点,需要将呆板的固定布局修改成灵活的流动百分比布局。

7、百分比布局

为什么用百分比布局?

当某个视口处于媒体查询设置的固定宽度范围之外(可能是某种未知的未来设备及视口),网页就需要水平滚动才能完整浏览。不过我们想要的是一个灵活的设计,能在所有视口中都完美显示,而不仅仅只针对媒体查询设定的一些固定视口。

固定宽度布局转换为百分比布局公式:

box宽度的值 / 元素父层宽度 = 百分比宽度值

比如:可视区域宽度为980px; 里边一个box的宽度为:900px

首先我们要设置一个百分比可视区域 = 原来的固定宽度,这个值用比如98% 60% 80%等,相对窗口,哪个百分比宽度更适合美观,就设置总宽度为百分比多少。

我们要得到box的宽度百分比值就是:box宽度的值(900) / box 父层(980px)= 0.918367

所以里边一个box的宽度百分比就要设置为 91.8367%

百分比图片

图片设置百分比可以实现图片随着流动布局相应缩放。

为了不让图片缩放过大造成失真效果,我们可以给图片追加max-width = 图片宽度PX属性
转载自:57剑人网

169/456
171/456

相关文章

文章评论

  • 暂无评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]