文档章节

响应式布局

wytao1995
 wytao1995
发布于 09/19 00:16
字数 484
阅读 10
收藏 0

一、响应式布局

Responsive web page响应式布局/自适应网页

可以根据浏览器设备不同(pc,pad,phone)而自动的更改布局,图片,文字效果,不会影响用户体验

二、响应式布局必须做到

1、布局:不能使用固定宽度,必须是流式布局(浮动)

2、文字和图片大小随着容器大小改变

3、媒体查询技术

三、如何测试响应式网页

1、使用真实设备测试

2、使用第三方模拟器

3、使用chrome等自带的模拟器

四、编写响应式布局

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">

1、使用meta设置视口

viewport 视口

width=device-width,视口宽度设置为设备宽度

initial-scale=1.0 ,视口宽度是否能缩放 1/1.0不缩放

initial-scale=1.0 允许缩放的倍率

user-scalable=0 是否允许用户手动缩放 yes/no/1/0

一般设置<meta name="viewport" content="width=device-width, initial-scale=1.0">

2、所有内容文字图片使用相对尺寸,不要使用绝对数字

3、流失布局+弹性布局,搭配媒体查询技术

4、使用css3 Media Query技术--响应式布局的必备条件

Media:媒体,指的是浏览网页的设备

        screen(pc/pad/phone)

        tv(电视)

        print(打印机)。。。

Media Query:媒体查询,可以更具当前浏览器设备不同,或者尺寸/方向/解析度等不同。有选择性的执行一部分CSS样式,忽略其他部分的css样式

根据媒体查询结果执行同一个css文件中不同的代码块

© 著作权归作者所有

上一篇: BootStrap
下一篇: CSS-动画
wytao1995
粉丝 1
博文 53
码字总数 33926
作品 0
六安
私信 提问
10款帮助你设计超酷响应式布局的jQuery插件

日期:2012/02/24 来源:GBin1.com 如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说,今天的设计者需要...

gbin1
2012/02/25
8.2K
2
如何利用栅格系统完成后台页面响应式设计(自己学习)

如何利用栅格系统完成后台页面响应式设计,介绍响应式设计的思路与方法。 一、什么是响应式? 按照本人自己的理解,响应式就是通过合理的设计方案配合规范的技术实现策略,使同一个 Web页面在...

石叶子
2018/12/06
0
0
18 个详细的响应式 Web 设计教程

在这篇文章中,我想跟你分享 18 个很有用的响应式 Web 设计的教程,这些教程可以帮助你学习响应式设计,包括瀑布流表格、图片和 media queries。 创建移动优先的响应式设计 使用 Sass 和 Co...

小编辑
2013/06/18
10.6K
5
前端响应式布局原理与方案(详细版)

引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是比较重。下面是博客网站对不同...

八叉树
04/08
0
0
使用HTML和CSS构建响应式网站布局

  大多数现代网站使用响应式网页设计,现在您必须考虑实际反应的意义,响应式网站可以适应不同的屏幕尺寸,并可以相应地调整其设计和布局。   在本教程中,我们将学习如何使用HTML和CSS...

芒果web
2017/04/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Vue warn]: Computed property "activeNames" was assigned to but it has no setter.

在使用 vue,element-ui时,如下代码 <template> <el-form :model="numberValidateForm" ref="numberValidateForm"> <el-form-item> <el-tabs v-model="activeNames" @tab-cl......

牧云橙
22分钟前
2
0
重构-改善既有代码的设计-6.2内联函数

6.2内联函数 动机 本书经常以简短的函数表现动作意图,这样会使代码更清晰易读。但有时候你会遇到某些函数,其内部代码和函数名称同样清晰易读。也可能你充够了该函数的内部实现,使其内容和...

还仙
23分钟前
4
0
Less 混入

混合类似于编程语言中的函数。 Mixins 是一组CSS属性,允许我们将一个类的属性嵌套于另一个类,被嵌入的类可以看作是变量,并且包含类名作为其属性,也就是说我们可以用一个类定义样式然后把...

凌兮洛
25分钟前
4
0
频繁FGC的真凶原来是它

频繁FGC的真凶原来是它 上周排查了一个线上问题,主要现象是CPU占用过高,jvm old区占用过高,同时频繁fgc,我简单排查了下就草草收场了,但是过后我对这个问题又进行了复查,发现问题没有那...

每天晒白牙
26分钟前
4
0
简单的树形菜单如何写

业务需求 数据结构中含有图片、名称、children的树形结构,需要展示出每一级的图片名称和图片,找了些树形图的插件,都没有展示大的图片的,一般都是小图标,就自己试着写一个包含图的简单的...

tianyawhl
28分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部