转自CSDNattilax的专栏 :自适应网页设计 跟 响应式 设计的区别跟原理and实践总结...
响应式Web设计(Responsive Web design)的理念是: 1
#-----------自适应布局VS响应式布局 2
设计思路Mobile First 2
#---手机and平板分辨率 3
#---------viewport...允许网页宽度自动调整贝儿哪不个网页缩小兰.. 3
#----------处理图片缩放的方法 3
#----选择加载CSS Media Queries 3
#=====3、布局宽度使用相对宽度(弹性布局) 4
#-----4、页面使用相对字体 4
流动布局(fluid grid) 流体布局,弹性布局 5
#----游戏网页的特别的设计 5
#------移动端/桌面端内容自适应 5
#-------图片背景的自适应 6
大尺寸图片的响应式设计 6
混合使用自适应AWD and RWD 6
参考: 6
响应式Web设计(Responsive Web design)的理念是:
作者 老哇的爪子 Attilax 艾龙, EMAIL:1466519819@qq.com
转载请注明来源: http://blog.csdn.net/attilax
#-----------自适应布局VS响应式布局
问:“什么样的网站/项目适合使用自适应布局(固定断点)?什么样的网站适合响应式布局?(流体网格)”
答:理论上来说,响应式布局在任何情况下都比自适应布局好一些,但在某些情况下自适应布局更切实际。
设计思路Mobile First
#---手机and平板分辨率
手机正常的2.8 --3.5--4.5 分辨率是320*480
#---------viewport...允许网页宽度自动调整贝儿哪不个网页缩小兰..
下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签
#----------处理图片缩放的方法
简单的解决方法可以使用百分比,但这样不友好,会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了,就缩小。假如图片小了,就原尺寸输出。
img { width: auto; max-width: 100%; }
#----选择加载CSS Media Queries
自适应网页设计"的核心,就是CSS3引入的Media Query模块。
它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px,那么可以这样写
@media screen and (max-width: 980px) {
@media screen and (max-device-width: 480px) {
#=====3、布局宽度使用相对宽度(弹性布局)
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。
#-----4、页面使用相对字体
在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),两者换算关系是:em = px*16 ,例如16px就等于1em。
总之,根据上面四步进行修改的话,可以很简单地将一个网站修改为适合多种设备浏览的页面,这对于通过手机访问网站的用户来说,的确是一件好事。
流动布局(fluid grid) 流体布局,弹性布局
#----游戏网页的特别的设计
游戏网页因为必须显示在第一个屏上,所以,普通的自适应设计需要有些更改..
#------移动端/桌面端内容自适应
在服务器端操作 HTML 内容(比如为移动端减少内容,为桌面端提供更多内容)
许多的框架能实现这个.贝儿就要使用js/后台语言判断来实现..
值得收藏的14款响应式前端开发框架-CSDN.NET.htm
#-------图片背景的自适应
使用css3 or 使用一个zindex=-5的图片,width 100%
大尺寸图片的响应式设计
Filament组提出了另外一种技术不仅是正确地设置图像的尺寸,在较小的设备中为了节约空间,还降低图像的分辨率,加载时间和移动宽带(流量)。
img <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">
混合使用自适应AWD and RWD
参考:
网页自适应的实现方法(网页分辨率不同以及手机和电脑网页的切换)_移动互联网开发_百度空间.htm
译文:自适应布局VS响应式布局以及最佳表单字段标签_Ryanwang_新浪博客.htm
转载于:https://www.cnblogs.com/qilinge/p/4972859.html
转自CSDNattilax的专栏 :自适应网页设计 跟 响应式 设计的区别跟原理and实践总结...相关推荐
- 自适应设计与响应式设计
目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念. 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网 ...
- 什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?(十九)
什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么? 页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包 ...
- 自适应设计和响应式设计
自适应设计:设计根据多个不同的尺寸设计多个不同的页面,一般会设计到手机端.ipad端.电脑端,开发根据不同的尺寸写好不同的样式,用不同的设备打开同一个网页时,布局差异比较大. 响应式设计:设计出一套页 ...
- flex如何做响应式设计_响应式设计-您做错了!
flex如何做响应式设计 Responsive design is not just about the web that automatically adjusts to different scr ...
- 什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?...
页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.css media query的使用等.无论用 ...
- 8、什么是响应式设计?响应式设计的基本原理是什么?如何做?
简介 我这么理解:响应式布局就是一个网站能够兼容多个设备,可以根据屏幕的大小自动调整页面的展示方式以及布局,我们不用为每一个设备做一个特定的版本.响应式网站的特点: 同时适配PC+平板+手机等 网站的 ...
- 14.什么是响应式设计?响应式设计的基本原理是什么?如何做?
一.是什么 响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整 描述 ...
- 什么是响应式设计?响应式设计的基本原理是什么?如何做
是什么 响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整 描述响应 ...
- 面试官:什么是响应式设计?响应式设计的基本原理是什么?如何做?
一.是什么 响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整 描述 ...
最新文章
- bzoj1564: [NOI2009]二叉查找树
- array_merge与array+array的区别
- C++ const 关键字使用
- (转)MOMO的Unity3D研究院之深入理解Unity脚本的执行顺序(六十二)
- 抗击肺炎,中国互联网公司在行动
- Centos6.5 安装Vim7.4
- ffmpeg软硬件解码基础(总目录)
- Oracle REGEXP_SUBSTR 字符串截取函数的使用
- Oracle External Table学习
- 游戏后台开发九问(腾讯技术分享实录)
- python--RGB转HSV
- Java中Number类详解
- c语言幂函数_了解C / C ++中的幂函数
- 软件推荐--Files2Folder
- MySQL高级--2--黑马
- Deepin20安装和配置NVIDIA显卡驱动
- 老毛挑U盘系统工具——ghost系统安装教程
- 无法访问yunlong.wj0920wjx.net指向的web服务器(或虚拟主机)的目录,请检查网络设置
- 已知圆柱体的底面半径c语言,C语言编程题带答案
- 常用电平标准(TTL、CMOS、LVTTL、LVCMOS、ECL、PECL、LVPECL、RS232
热门文章
- java垃圾回收机制串行_Java垃圾回收机制
- java对docker_Java和Docker限制问题
- idea快速写出for循环
- 005_JSONArray对象静态方法
- 003_Jsp动作标签
- 022_JavaScript数字
- java panel 左对齐,将Shape的中心与JPanel的中心对齐 - java
- internetreadfile读取数据长度为0_Datax3.0的安装和基本使用
- share extension 不显示_这几项超好用的云开发扩展能力,别说你还不知道!
- Java数据结构与算法:排序算法