响应式Web设计
提出时间
2010年5月
英 文
Responsive Web design
一个网站能够兼容多个终端
目 的
转载
2024-08-29 14:23:16
71阅读
响应式Web设计 ------------ Responsive Web Design 页面的设计与开发应当根据用户
原创
2023-06-26 06:38:18
325阅读
设置 Viewport 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 heigh ...
转载
2021-05-11 04:38:00
218阅读
2评论
在设计中经常遇到这几个问题：1.想要网站兼容手机、平板电脑、pc，就得为不同的设备定制不同的版本。2.想要网站的某些页面在宽屏显示器下一行显示更多的内容，又得为宽屏定制一个版本。3.很多人并不是在全屏的情况下浏览我们的页面，如果让页面随着浏览器宽度改变而相应的调整会不会比较好？有没有办法能有效解决这些问题呢？响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当
转载
2023-10-16 14:18:17
89阅读
响应性web设计实战响应性web设计的理念是：页面的设计与开发应当根据用户行为与设备环境(包括系统平台，屏幕尺寸，屏幕定向等)进行相应的响应及调整。具体的实践方式由多方面组成，包括弹性网格和布局，图片，css Media(媒体查询)使用等。一：布局方式有如下几种： 1. 固定布局：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX，前几年
转载
2023-12-11 14:54:14
74阅读
在设计中经常遇到这几个问题：1.想要网站兼容手机、平板电脑、pc，就得为不同的设备定制不同的版本。2.想要网站的某些页面在宽屏显示器下一行显示更多的内容，又得为宽屏定制一个版本。3.很多人并不是在全屏的情况下浏览我们的页面，如果让页面随着浏览器宽度改变而相应的调整会不会比较好？有没有办法能有效解决这些问题呢？响应式Web设计(Responsive Web design)的理念是页面的设
转载
2023-11-15 17:25:35
99阅读
1响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 1. ...
转载
2021-07-27 15:37:00
201阅读
2评论
“响应式Web设计”的出现背景 在很早之前（或者在目前也存在此情况），我们写出来的前端页面可能都还是固定宽度的
原创
2021-08-26 17:22:45
252阅读
Web语义化Web语义化是指使用语义恰当的标签，使页面有
原创
2022-07-13 09:11:41
90阅读
基于Tom Barker 的《响应式web设计性能优化》做得总结和拓展。对web设计有初步认识。 页面如何到达浏览器并展现给用户： 1. 浏览器与dns服务器之间（DNS查询） 当通过浏览器请求一个web页面，浏览器会创建一个线程去处理这个请求，随后开始远程dns查找，远程dns服务器会将输入的URL对应的IP地址返回给浏览器。（DNS域名系统）2. 浏览器与web服务器之...
原创
2021-11-30 16:15:54
206阅读
“响应式Web设计”的出现背景 在很早之前（或者在目前也存在此情况），我们写出来的前端页面可能都还是固定宽度的，这种页面如果仅仅是在我们的笔记本电脑或者一般的台式机来加载浏览的话可能差别不是很大，虽然有较小的差别，但不太会超出我们的忍耐程度。但是呢，目前我们浏览网页的方式发生了巨大的变化，这就得益于各种浏览设备的出现了，例如：手机、平板、大比例展示屏…… 那如果...
原创
2022-02-21 17:53:27
83阅读
bootstrap栅格化想必大家都用过。那么它的原理如何？通过媒体查询和定义好类。以便直接使
原创
2022-09-09 10:17:04
79阅读
前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。
如何让自己的网站也响应式Web设计，可以响应设备的分辨率呢? 根据Ethan Marcotte的文章，和相关的实践，已经总结出了一些实践方法。（本文最后列出了所引用的文章和工具）响应式Web设计是想把固定的(Fixed)设定(位置定位，长宽大小)变为相
转载
精选
2012-10-23 11:03:06
367阅读
固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备
原创
2023-03-20 10:41:50
106阅读
固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备
原创
2023-04-04 21:26:38
107阅读
响应式Web设计，这个话题可能是当下Web设计领域里讨论和应用比较多的话题了和服务层出不穷，现在打开电脑，可能使用最多的...
原创
2022-09-23 17:09:17
87阅读
前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。
如何让自己的网站也响应式Web设计，可以响应设备的分辨率呢? 根据Ethan Marcotte的文章，和相关的实践，已经总结出了一些实践方法。（本文最后列出了所引用的文章和工具）响应式Web设计是想把固定的(Fixed)设定(位置定位，长宽大小)变为相对的(Rel
推荐
原创
2012-06-07 16:44:56
1012阅读
1.什么是响应式Web开发响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用手机、笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适
转载
2023-12-20 15:35:10
126阅读
博客园首页新随笔联系管理订阅随笔- 40 文章- 0 评论- 0 响应式web-媒体查询响应式web-媒体查询媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂。这些查询语句都是简单但是功能很强大的，它们允许我们检测设备属性，定义规则，并根据规则等的不同加载不同的 CSS 属性。例如，你可以为不同的设备优化导航菜单，将桌面浏览器上的完整水平菜单转换为经常在移动
转载
2017-05-18 09:39:07
420阅读
在媒介查询中声明背景图片。这样只有那些需要用到背景图片的才会发送请求加载它目前，基于Webkit的浏览器在下载好Web字体之前，是不会显示使用该Web字体格式化的文本的。这就意味着如果用户使用的是一个连接速度很慢的设备时，需要花费一段时间来显示。所以我们可以将@font-face的声明也放到媒体查询中去。这样做可以确保那些屏幕宽度低于断点的设备不会尝试下载字体与有线连接相比，移动网络正遭受着显著增加的延迟和显著减少的带宽。因此，在考虑站点在移动网络上的性能的时候，通过采用内联的样式表和脚本来减少请求数目会更有意义var t...
转载
2013-12-22 04:53:00
78阅读
2评论
