响应式布局和移动端布局

响应式布局就是响应式设计方案呈现的效果。具体就是页面的布局会根据不同设备的显示面积(主要是宽度)的不同而呈现不同的布局,这个效果是比弹性的布局更好的地方是样式会主动地根据用户的设备的显示面积呈现的布局更灵活,可读性更强。当然对研发的要求也更高(比如说如何更好地让图片,适配,UI动画自适应各种布局)。响应式设计一般来说是一套设计方案解决所有的设备的自适应问题。对应的样式文件可能是多个,也可以只写一个(在一个css文件声明不同的media query就可以)。

移动端布局就是传统的固定宽度或者弹性布局的设计方案呈现的效果。一般来说,这个布局设计开发都比较简单,同时设计的效果可以更精细,细节更丰富。不过不好的地方就是如果要适应很多不同的设备,就需要设计多套设计方案,或者让比较小屏的方案去适应多个大屏,适应的效果上可能不是特别好。

响应式设计方案的一般的做法就是根据目标用户的访问设备的主要类型做三种或四种布局。每种布局有一个区间,比如说小屏的手机分分辨率可以设定为[320,640]。然后分别设计每种布局即可,一般来说,各个布局主要是调整模块的排列布局顺序,内容调整越少越好(尽量减少用户适应成本)。

不同之处:

1、适配的群体不同,响应式适配各种终端,而移端大部分为智能手机为主
2、响应式布局能根据不同的终端设备实现不同的页面布局,而移动端布局大部分是单列布局
3、响应式布局有可能造成冗余的代码较多(传统式响应式布局,仅依赖于媒体查询,控制不同的页面布局),移动端布局冗余代码较少,对针对性较强。

相同之处:

1、在智能手机上,响应式看到的页面效果能和移动端的一样效果
2、两者都要面对适配的问题

时间: 2024-10-26 14:03:44

响应式布局和移动端布局的相关文章

第三十三节-初级响应式和初级移动端布局(最基本)

一.响应式布局:pc端用响应式布局较多 监测宽度变化给出不一样的网页布局 1.媒体查询 三种常用的媒体:all(所有媒体) screen(彩屏设备,手机 电脑) print(打印设备) 查询关键词: not   only    and(and两边要有空格) 媒体特性:min-width:500px   表示网页宽度大于500px时 max-width:500px  表示网页宽度小于500px时 orientation:portrait 竖屏,网页高度大于等于宽度时 orientation:lan

任务八——响应式网格(栅格化)布局之问题总结

题目请看:任务八:响应式网格(栅格化)布局 一:要求是每个元素之间的间距均为20px,首先间距的实现有两种方法:    方法1. <div class="container"> <div class="col-sm-4 col-xs-6">4-6</div> . . . . . . </div> container设置box-sizing:border-box:width:100%:padding:10px:每个div

响应式网格(栅格化)布局总结

任务目的 使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局,根据屏幕宽度,元素占的栏数不同. 任务描述 需要实现如 效果图 所示,调整浏览器宽度查看响应式效果,效果图中的红色的文字是说明,不需要写在 HTML 中. 任务注意事项 网格布局的作用在于更有效地控制元素在网页中所占比例的大小.比如,博客中有一个留言板模块,在比较大的屏幕上,我们希望它占了右边 25% 的宽度,在手机等比较小的屏幕上,我们希望它占 100% 的宽度,出现在博客文章下方.网格布局是一种实

(作业)百度前端技术学院 任务八:响应式网格(栅格化)布局

百度前端技术学院 任务八:响应式网格(栅格化)布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IFE Task1-8</title> <style> body{ margin:0; } .container{ box-sizing: border-box; padding: 10px;

任务八:响应式网格(栅格化)布局

任务目的 使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局,根据屏幕宽度,元素占的栏数不同. 任务描述 需要实现如 效果图 所示,调整浏览器宽度查看响应式效果,效果图中的红色的文字是说明,不需要写在 HTML 中. 任务注意事项 网格布局的作用在于更有效地控制元素在网页中所占比例的大小.比如,博客中有一个留言板模块,在比较大的屏幕上,我们希望它占了右边 25% 的宽度,在手机等比较小的屏幕上,我们希望它占 100% 的宽度,出现在博客文章下方.网格布局是一种实

关于响应式设计与服务端性能

服务器端层 智能响应策略的最后一个选择是服务器. 服务器端功能检测和决策不是 移动网络的新鲜玩意.类似 WURFL 和Device Atlas的库在市场上有好多年,响应式设计和服务器组件的混合也众所周知.有时被称为是响应式设计和服务器端组件(RESS),有时又叫自适应设计,这 提高了响应式设计的速度和可用性,同时每一个服务器端都保持一个代码库. 很遗憾的是.这些技术这几年并没有什么突破性的发展.只能在博客和 杂志里看到一些开发者对"RESS"."响应式"."

移动端布局学习之流式布局1

1.移动端基础 1.1 浏览器现状 国内的UC和QQ 百度等手机浏览器都是根据Webkit修改过来的内核,国内目前尚无自主研发的内核,就像国内的手机系统基本上都是局域安卓修改开发的一样. 意思就是:兼容移动端主流浏览器 处理Webkit内核浏览器即可. 1.2 手机屏幕的现状 移动端设备屏幕尺寸非常多,碎片化严重 Android设备有多种分辨率480*480 480*854 540*960 720*1280 等等 近年来iPhone的碎片化也严重了 其设备的主要分辨率有 640*960 640*

html5 响应式布局

响应式布局 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端. 第二:响应式设计的步骤 响应式设计的步骤就是1.编

精通移动端布局 - 概念篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录: 基本概念    物理像素    设备独立像素    CSS 像素    PPI的概念    DPR的概念    缩放的概念    viewPort 的概念    viewport 渲染流程    Meta 标签说明 移动端布局实践    混合方式    REM 方式        响应式        JS自动换