自适应和响应式区别以及写法

自适应:

在不同分辨率下不同设备上显示相同的页面。即:根据屏幕的宽度,自动调节网页内容的大小,使其主体内容和布局不变。

响应式:

响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局。

(1)允许网页的宽度自动的调整

(2)尽量少使用绝对的宽度,多点百分比

(3)相对大小的字体:字体不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个不限制与字体,别的属性也可以这么设置

(4)流式布局,float等float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

(5)选择加载css,<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />,这个意思是如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

时间: 2024-11-02 07:40:02

自适应和响应式区别以及写法的相关文章

自适应和响应式布局的区别,em与rem

自适应布局:不同终端上显示的文字,图片,等位置排版都是一样的,只是大小不同. 响应式布局:通过媒体查询监听屏幕大小的变化,做出响应式的改变,在不同设备可能展现不同的样式效果. em:是相对其父元素的. rem:相对于页面根元素,推荐使用rem. 原文地址:https://www.cnblogs.com/ZM-ONE/p/8969046.html

bootstrap自适应和响应式布局的区别

自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: bootstrap是依赖jquery的,使用时先装上jquery. Boostrap的“栅栏”模式 Boostrap自适应功能的基础就是“栅栏"模式,它是将浏览器以行列形式去划分:一共12列,行数自定义,根据你所要显示的元素,确定每个元素显示的大小即需要的列数,如果超过范围,就会自动转行.每列的大小是Bo

【CSS框架】PRUE实现自适应和响应式

什么是响应式和自适应? 1.响应式:样式会随着屏幕大小改变,同一页面设备不同样式不同 2.自适应:不管屏幕大小,页面的样式比例不变 响应式和自适应怎么布局? 在css3之前无从谈起响应式和自适应 Css3怎么做到的呢?(我知道的几种) 1.媒体查询 2.运用百分比布局 3.rem 4.css框架(Bootstrap.jQuery Mobile.Pure--) 1.媒体查询 @media all and (屏幕宽度){ 样式表 } 2.运用百分比布局 width:100%: 3.rem body{

响应式和自适应的区别

玩前端也有几个月了,发现大家普遍混淆了响应式和自适应的概念.先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/ 整理了几篇自适应和响应式的文章,摘抄并修改了一下,请大家欣赏: 起初,网页设计者都会设计固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时电脑本来就少,即使有变化也是 800 850 870 880.比如 开源中国的网页就是固定宽度为998

自适应布局和响应式布局

记得第一次实际工作中接触到响应式布局排版之后,老大问了一个问题,自适应和响应式有什么区别吗? 自己理解的自适应布局是把宽度px值换成百分比,文字px单位换算成em单位,然后解决在不同大小设备上呈现同样的网页,但是这样屏幕过小,内容看上去就会很拥挤.觉得响应式听上去和自适应会差不多. 当时也不懂为什么同样的一个页面要设计3版风格(pc,pad,phone),觉得很麻烦,感觉不知道从何开始下手. 然后就接触到了下面这些内容: 1.meta标签的viewport属性 <meta name=”viewp

html5/css3响应式页面开发总结

一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会带来兼容各种设备工作量大.代码累赘.加载时间长的缺点,但它们跨平台和终端,能"一次设计,普遍适用",可以根据屏幕分辨率自适应以及自动缩放图片.自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile

paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

建立map的方式(其实用的是json实现方式) var a = {}; a["key1"] = "value1"; a["key2"] = "value2"; 既然是个map就有检索某个键是否存在的方法,这样写 if ("key1" in a) { // something } else { // something else } 简单的一句话声明map里面的key和value的方式: var a = {'

静态、自适应、流式、响应式四种网页布局有什么区别?

响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度. 不同点是响应式的模板 在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式. 而自适应不会,所有的设备看起来都是一套的模板,不过是长度或者图片变小了,不会根据设备采用不同的展示样式. 流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载. 静态的就是采用固定宽度的了.

HTML和CSS高级指南之四——响应式设计

互联网发展的速度超乎所有人的想象,甚至可以说是疯狂.在过去几年里,移动互联网的发展已经开始崭露头角.而他的发展速度也远远超过了传统互联网. 如今很难找到一个人既没有移动设备,也没有多个可以上网的设备.在英国 移动电话的数量已远远超过人口数,保持这样的 增长势头,今年移动互联网的使用应该就有望超过桌面互联网. 随着移动互联网的兴起,也带来了一个问题,就是如何搭建一个网站,可以适合所有用户访问.行业对于这个问题的回答是响应式设计,也就是熟知的RWD. 第四课所涉及的主要内容 HTML 响应式设计概述