前端【响应式】开发详细解析

一、响应式设计需要解决的问题是什么?

针对目前大家常见的固定布局、自适应布局都是一种反应迟钝的web设计,当Web页面需要在各种显示屏显示时,他们就显得力不从心了。因此,我们就需要相应设计。

优势:

一个页面适应各种显示屏;

具有良好的SEO;

较大缩短开发周期;

给用户更多的选择,更好的用户体验;

二、响应式包含哪些部分?

在学习响应式设计时,我们需要知道以下几个常见的术语。

1、流体网格

一个简单的网格系统,将每个格子使用百分比单位来控制网格大小,其优势是网格随着屏幕大小作出对于的比例缩放。

2、弹性图片

弹性图片是指不给图片设置固定尺寸,而更具流体网格进行缩放来适应不同的尺寸。实现方法如下代码:

img{

max-width:100%;

}

注:IE8中会使图片不显示,所以需在IE8中增加对于hack样式。

3、CSS3 Media Queries

它是响应式设计最关键的一个应用,它可以根据浏览器窗口的大小、方向、屏幕规格选择对于的样式文件。

4、屏幕分辨率

所谓屏幕分辨率是指:分辨率是1920设备像素*1080设备像素,在纵向上排列了1080个显像用的小点,在横向上排列了1920个显像用的小点,同一尺寸的屏幕下,分辨率越高(横向、纵向上的显像点越多越小)屏幕越清晰。

问题:在高清屏和普通屏下,css的100px展示会不会有差异?

答案是:不会有差异!

在普通的屏幕下1px占用一个设备像素,而在高清屏幕下(如苹果的视网膜屏)1px占用2个设备像素。以iphone6来说物理像素是750 * 1334,因为是高清屏幕,所以用px来度量的话就是 375px * 667px。这个可以在chrome浏览器的调试模式下查看。

5、主要断点

断点是为min-width和max-width服务的。@media (min-width:320px){}

三、One More Thing?

1、自适应布局盒响应式布局区别

自适应布局:就是我们常见的百分比布局,它可以让你的布局在不同分辨率下适应其大小,但这种布局需要一个最小宽度来辅助实现,不然在一定尺寸下,整个布局会乱掉,只不过这种不固定值是%而不是px。

响应式布局:是一个多列流体布局,其利用的是媒体查询来实现web页面在不同分辨率下的完美呈现,和自适应布局还是有本质上的差别。

2、em在响应式设计中的运用

em和font-size优很大关系,它也是css的一个度量单位,不过它比px更适合响应式设计,他能让你的断点根据字号大小来调整其值。

20em = 20 * 16 = 320px

30em = 30 * 16 = 480px

@media only screen and (min-width : 20em) {}

@media only screen and (min-width : 30em) {}

3、常用css单位

常用有三种:px em %

px:浏览器的度量单位,相对于物理像素,1px在高清屏幕下可能占用2个物理像素、甚至3个物理像素。

em:相对于父元素的font-size,如父元素font-size设置为16px,子元素font-size设置为0.75em,那么转换为px就是0.75 * 16px = 12px;

%:相对于父元素的长度高度,position:fixed 、absolute 除外(fixed将相对于窗口、absolute相对于递归父元素知道 第一个设置了position的元素)

rem:相对于根节点(一般为html节点)的font-size,如果html节点设置font-size = 100px,那么文档中的元素设置为0.3rem,则计算为:0.3 * 100px = 30px

vh/vw:相对于设备的可视范围,在移动端中经常会用到,比如:设计师经常要求,banner占满首屏高度既:100vh。如iphone6 (375px * 677px)= (100vw * 100vh) ,而iphone6 plus (414px * 736px) = (100vw * 100vh) 两种屏幕下的vw、vh是不一样的。

clac:css3中的长度计算语法,支持+、-、*、/的计算。

四、响应式设计关键三步

第一步、设置meta标签

使用设备的宽度为视图的宽度,禁止默认的自适应页面的效果,禁止缩放效果。如下:

由于IE6-IE8不支持响应式设计,所以需增加相应插件来支持respond.js或者media-queries.js,如下:

<!--[if lt IE9]>

<script src=‘http://xxx/response.js‘></script>

<![end]-->

第二步、HTML MarkUp

基础一般会包括:头部、导航、内容、页脚。

第三步、媒体查询

1、一般用min-width和max-width来检查各种设备的分辨率大小

@media screen and (min-width : 768px) {}

@media screen and (max-width : 1024px) {}

@media screen and (min-width : 768px)  and (max-width : 1024px) {}

2、设备宽度device-width主要用在苹果产品上

@media screen and (min-device-width : 768px)  and (max-device-width : 1024px) {}

3、调用独立样式表

常用模板:

1024px显示屏:@media screen and (max-width : 1024px) {}

ipad横屏:@media screen and (max-device-width : 1024px) and (orientation:landscape) {}

ipad竖屏:@media screen and (max-device-width : 768px) and (orientation:portrait) {}

iphone和smartPhone:@media screen and (min-width : 320px)  and (max-width : 480px) {}

大屏幕、中屏幕、小屏幕的划分:

小屏幕:<769px;@media only screen and (min-width : 769px) {}

中屏幕:769~1366px或者769~1440px;@media only screen and (min-width : 769px) and (max-width:1366px){}

大屏幕:1366~1920px;@media only screen and (min-width : 1367px) {}


更多视频教程请关注微信公众号!!!!!!!

时间: 2024-11-10 01:21:24

前端【响应式】开发详细解析的相关文章

前端响应式开发

最近在工作中遇到一些让人头疼的问题--多媒体查询,也就是大家所说的响应式布局(多终端适配).在实际的开发过程中,响应式的设计使得多终端的适配变得非常方便,响应式展现的方式,更有一种组装变形金刚的感觉,但也在实际工作中发现了许多问题: 一.开发思维变得复杂 在我们开发页面的时候,思维无法专注于单一的PC端.移动端以及Pad端,开发每一个元素与版块的时候,都需要考虑多终端适配:所以建议大家在接到这一类项目的时候,不要急于去开发,先把所有的终端页面设计图全部浏览的看一遍,不单单光是看,看的过程中脑海里

前端全栈架构,组件式开发,响应式开发,全栈工程师架构,用户界面架构,企业级架构项目实战

我本是一名文科专业半路出家的前端开发人员,从最初只会切图和写CSS.Html到现在会写点JS,一路坑坑洼洼,也是经历了很多,从2010年开始就用WordPress开设了自己的博客,虽然内容零零散散的并不多,但是多多少少也留下了时光的缩影,一直希望自己有一个自留地.用Node.js做服务端替换WordPress是去年的一个想法,由于一直腾不出时间,所以拖到了现在.当然了WordPress作为全球用户量最广的开源博客程序,易用性等诸多好处无可厚非,光自己的博客在过去几年就用了很多套模板,也用它做过很

响应式开发

一:网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽度人为的划分成均等的长度,然后排版布局时则以这些均等的长度做为度量单位,通常利用百分比做为长度单位来划分成均等的长度. 4.响应式布局:通过检测设备信息,决定网页布局方式,即用户如果采用不同的设备访问同一个网页,有可能会看到不一样的内容,一般情况下是检测设备屏幕的宽度来实现. 注:以上几种布局方式并不

springboot 使用webflux响应式开发教程(二)

本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading-service,groupId=io.spring.workshop.选择Reactive Web , Devtools, Thymeleaf , Reactive Mongo.WEB容器spring-boot-starter-webflux 附带了 spring-boot-starter-reac

15个最好的HTML5前端响应式框架(2014)

文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它可以编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法,参见: LESS vs SASS?选择哪种CSS样式编程语言? 最好的HTML5框架一般也是最流行的,使用这些框架可以极大地减少你的工作量,节约你的时间. HTML5有非常有用和令人意想不到的功能,但也有少数浏览器并不支持HTML5,因此我们需要基于HTML5的前端响应式框架做跨浏览器的支持.这些HTML5的框架有很多,大多支

web前端响应式布局,自适应全部分辨率

写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单了解过,没真正实践啊.bootstrap比我想象的要好用的多.关键是.关键来了-- app端是仅仅有手机的,pc基本上木有.那就是说仅仅能依照手机端开发,那么boostrap响应式布局就不适用于app了(反正我是做了一套半成品,被推翻了).不能愉快的工作了.好不淡定的时间. .百度.百又问问同事.发

初识响应式开发

1.响应式布局(respond layout):一个网站能够兼容到多个终端. 2.响应式布局原理:使用css3中的Media Query(媒介查询)screen的宽度来指定某个宽度区间的网页布局 超小屏幕(移动设备) 768px以下 小屏设备 768px - 992px 中等屏幕 992px-1200px 宽屏设备 1200px-1920px 3.响应式和移动web的区别 开发模式 移动web开发+pc开发 响应式开发 应用场景 一般在已经有pc端的网站,只需单独开发移动端 针对新建的网站,一套

带你玩转JavaWeb开发之五-如何完成响应式开发页面

响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad端, 手机端同时正常显示啊,并且不能够影响显示效果 技术分析 BootStap概述 什么是BootStrap BootStrap有什么作用 什么是响应式 BootStrap的中文网 http://www.bootcss.com 下载BootStrap BootStrap结构 全局CSS bootSt

原理+实战 快速掌握响应式开发精髓

第1章 课程介绍介绍什么是响应式:课程安排:学习建议1-1 导学1-2 课程介绍 第2章 实战利器逐一讲解响应式web开发的理论,工具和方法.对响应式开发中涉及的各核心技术进行深入的分析.知识点概念/原理与示例结合,让你全面/透彻的理解和掌握响应式开发.2-1 单位像素2-2 媒体查询-视口12-3 媒体查询-视口22-4 媒体查询-媒介查询2-5 设计稿2-6 浮动2-7 flex新科技2-8 栅格系统2-9 分而治之&预处理工具2-10 JavaScript2-11 调试方法 第3章 项目实

原理+实战 快速掌握响应式开发

第1章 课程介绍介绍什么是响应式:课程安排:学习建议1-1 导学1-2 课程介绍 第2章 实战利器逐一讲解响应式web开发的理论,工具和方法.对响应式开发中涉及的各核心技术进行深入的分析.知识点概念/原理与示例结合,让你全面/透彻的理解和掌握响应式开发.2-1 单位像素2-2 媒体查询-视口12-3 媒体查询-视口22-4 媒体查询-媒介查询2-5 设计稿2-6 浮动2-7 flex新科技2-8 栅格系统2-9 分而治之&预处理工具2-10 JavaScript2-11 调试方法 第3章 项目实