浅谈静态布局、流式布局,rem布局,弹性布局、响应式布局
静态布局:
特点:没有兼容性问题
PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.
·流式布局:
特点:屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。
设计:使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围
<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
/* device-width为屏幕的输出宽度 */
响应式布局
设计:媒体查询+流式布局
1.设置 Meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2.通过媒介查询来设置样式 Media Queries
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
弹性布局(rem/em布局)
包裹文字的各元素的尺寸采用em/rem做单位,可以使包裹文字的元素随着文字的缩放而缩放;
而页面的主要划分区域的尺寸仍使用百分数或px做单位
浅谈静态布局、流式布局,rem布局,弹性布局、响应式布局的更多相关文章
- 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...
- 由浅入深,带你用JavaScript实现响应式原理(Vue2、Vue3响应式原理)
由浅入深,带你用JavaScript实现响应式原理 前言 为什么前端框架Vue能够做到响应式?当依赖数据发生变化时,会对页面进行自动更新,其原理还是在于对响应式数据的获取和设置进行了监听,一旦监听到数 ...
- css3基础、(弹性、响应式)布局注意点
E1>E2选择父元素为E元素的所有E2元素(子类选择器) E1+E2选择元素为E1之后的所有E2元素(兄弟选择器) E[attr]只使用属性名,但没有确定任何属性值 E[attr="v ...
- 基于REM的移动端响应式适配方案
视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...
- CSS3移动端vw+rem不依赖JS实现响应式布局
1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...
- 浅谈响应式Web设计与实现思路
是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理论基础, ...
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
- 一个菜鸟所喜欢用的响应式布局,操作方便简单、时尚简约,适合新手!(一个Dreamweaver cs6生成响应式布局)
前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式设计的流行,前端开发变得越来越困难,且花费 ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
随机推荐
- Promise的用法(js&java)
Promise(onsuccess , on fail) f1.then(f2.then(), f3.then()) java CompletableFuture.thenAccept
- 吴裕雄--天生自然python学习笔记:Python3 OS 文件/目录方法
os 模块提供了非常丰富的方法用来处理文件和目录.常用的方法如下表所示: 序号 方法及描述 1 os.access(path, mode) 检验权限模式 2 os.chdir(path) 改变当前工作 ...
- centos7 开机/etc/rc.local 不执行的问题(转载)
最近发现centos7 的/etc/rc.local不会开机执行,于是认真看了下/etc/rc.local文件内容的就发现了问题的原因了 #!/bin/bash # THIS FILE IS ADDE ...
- idea 内存溢出解决方法
在Run/Debug configuration 的 vm options里面输入 -server -XX:PermSize=128M -XX:MaxPermSize=256m 具体如下图:
- POJ 3678 2-SAT
题意:有n个顶点里面可以放数字1或0,给m个限制,每个限制给出两个顶点编号和两编号内数字运算后的结果 思路:很直接的2-SAT,每个点分为1和0两种情况,按限制要求建边,跑tarjan然后判断点是否在 ...
- 吴裕雄--天生自然KITTEN编程:掉金币
- 将js进行到底:node学习6
开始真正的node web开发--express框架 为何说现在才是web开发的真正开始呢? 首先任何企业都不会用原生的http协议API去开发一个完整的网站,除非她们先开发一个框架出来,其次我们之前 ...
- 添砖加瓦:[OpenCV]入门(一)
1.OpenCV安装 (1)下载: 本文采用的是源码的方式进行安装,源码可以从OpenCV官网下载.这里以3.4.1为例. (2)安装 这里下载到的文件为3.4.1.zip."unzip 3 ...
- Magic Methods 5
描述符 : 将某种特殊类型的类的实例指派给另一个类的属性. 特殊类型为以下方法的1-3个 : __get__(self, instance, owner):用于访问属性,它返回属性的值 __set__ ...
- 推荐一款在UBUNTU下使用的编辑器
偶然的机会 ,发现了这款软件,以前一直是在用gedit编辑器,但在WINDOWS下写的文档,在ubuntu下用gedit打开后,复制有换行的问题,一直没解决,所以在网上找到了这款软件,安装使用了几天, ...