初探响应式Web设计

2024-04-27 14:28:14

字体：大中小

来源：转载

供稿：网友

初探响应式Web设计

公司书柜有本《响应式Web设计：HTML5和CSS3实战》，大概就认真看了前面几章，后面大部分介绍css3（随便找本手册都可以了要你可用！）

《响应式Web设计：HTML5和CSS3实战》
移动优先的跨终端 Web 天猫前端 @徐凯-鬼道 W3CTECH 2013http://luics.com/demo/cew-w3ctech-1311/#/

响应式布局设计思想概念

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

优点和缺点

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

根据不同的宽度进行识别,css3 media, 字体rem 按照根元素进行放大,避免css sPRite按钮等,不然要使用图片缩放进行设置

设计思想

mobile frist (移动优先)

A级必须兼容, 简单来说比较普遍是最低兼容 480 768 1024 这三个分别率,现在还有 1280 1960 等等级别要考虑(4k等等还是需要media进行选择

media ie8-6不支持可以使用respond令到其支持,不过不需要(ie8以下就给他使用默认css,不必太友善对待,必须要兼容可以考虑使用Respond.js

内容优先是响应式的第二个思想,让主体内容首先显示,还有是对应部分次要模块进行修正排版显示在后面。

例子就看我博客就可以了！（改版之后再说）

1200-1920（固定1200）（主要桌面级对于4k设备暂时还未考虑）

1200-1024（固定1000）（旧pc和平板）（ie6-8不支持响应式也默认这个宽度，然而对应太过老旧的东西我个人是不想做的）

768（768-1000）（宽99%）（个人确实不喜欢满屏）

上面只是兼容完全无说到内容优先吧客官稍慢，现在上菜

480-768 对应左右模块放在一起显得会太过紧凑，针对移动设备把主题内容优先，所以文章列表在上面日期公告就被我放置在列表到下面，（其实思想就是这么简单）

简单的响应式布局

根据宽度来变颜色

<!doctype html>

<head>

<title>Responsive Design</title>

<style>

.content{

color: #123;

border: 1px solid #123;

width:98%;

margin: 0 auto;

}

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

.content{

color: orange;

border: 1px solid orange;

width:95%;

}

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

.content{

color: red;

border: 1px solid red;

width:98%;

}

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

.content{

color: green;

border: 1px solid green;

width: 95%;

}

</style>

</head>

<body>

</body>

</html>

媒体查询能检测那些特性

 width：视口宽度。

 height：视口高度。

 device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。

 device-height：渲染表面的高度（对我们来说，就是设备屏幕的高度）。

 orientation：检查设备处于横向还是纵向。

 aspect-ratio：基于视口宽度和高度的宽高比。一个16∶9 比例的显示屏可以这样定义aspect-ratio: 16/9。

 device-aspect-ratio：和aspect-ratio 类似，基于设备渲染平面宽度和高度的宽高比。

 color：每种颜色的位数。例如min-color: 16 会检测设备是否拥有16 位颜色。

 color-index：设备的颜色索引表中的颜色数。值必须是非负整数。

monoChrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如monochrome: 2。

 resolution：用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi。还可以接受每厘米像素点数的度量值，如min-resolution: 118dpcm。

 scan：电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）。如720p HD 电视（720p 的p 即表明是逐行扫描）匹配scan: progressive，而1080i HD 电视（1080i 中的i 表明是隔行扫描）匹配scan: interlace。

 grid：用来检测输出设备是网格设备还是位图设备。在上述所有特性中，除scan 和grid 之外，都可使用min 和max 前缀来创建一个查询范围。例如，分析如下所示的代码片段：

 @import url("phone.css") screen and (min-width:200px) and (max-width:360px);这里对width 应用了min 和max 来设定查询范围。这样phone.css 文件只会引入视口宽度介于200 像素至360 像素的显示屏设备。

根据上述可以先写一个无media的css 让一些低端浏览器去读取,大概就是1024等级用户,后面使用media 对其他分辨率进行覆盖重写.