数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类 全部分类技术牛文全部分类教程最新 网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava 新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销 开发数据库服务器系统虚拟化云计算 嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

响应式布局总结(推荐)

日期:2016/9/11 22:11:00 来源:本网整理
s">

响应式布局总结(推荐)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:07-10 11:25:48 我要评论

下面小编就为大家带来一篇响应式布局总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ">

响应式布局的开发基础知识

本章主要分为以下几个部分

•正确理解响应式设计
•响应式设计的步骤
•响应式设计需要注意的问题
•响应式网页布局实现原理

第一:正确理解响应式布局

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

第二:响应式设计的步骤

了解了什么是响应式,那么接下来我们就要说说响应式设计的步骤,有人这时候会说“博主,你傻啊,响应式设计的步骤不就是1.编写非响应式代码、2.加工成响应式代码、3.响应式细节处理、4.完成响应式开发吗?”博主菊花一震 原来高手在民间啊,微微一硬表示敬重,我去 ,说错了 是微微一笑,大家不要误会啊。

言归正传,博主因为是刨根问底拦不组的,所以在此就往响应式设计的祖坟上刨,深入了解下这四个步骤。

1.布局及设置meta标签

当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小,我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。

当你完成当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到和标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。

XML/HTML Code复制内容到剪贴板
  1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">  
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  3. <meta name="HandheldFriendly" content="true">  
  4. user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。  

2.通过媒体查询来设置样式media query

media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写

XML/HTML Code复制内容到剪贴板
  1.  @media screen and (max-width:980px){   
  2.      #head { … }   
  3.      #content { … }   
  4.      #footer { … }   
  5. }这里面的样式会覆盖掉之前所定义的样式。  

3.设置多种视图宽度

假如我们要兼容ipad和iphone视图,我们可以这样设置:

XML/HTML Code复制内容到剪贴板
  1. /**ipad**/   
  2. @media only screen and (min-width:768px)and(max-width:1024px){}   
  3. /**iphone**/   
  4.  @media only screen and (width:320px)and (width:768px){}  

3.字体设置

到目前为止,开发人员用到的字体单位大部分都是像素,虽然像素在普通网站上是Ok的,但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度,这样才能适应客户端屏幕。

css3引入了新的单位叫做rem,和em类似但对于Html元素,rem更方便使用。

rem是相对于根元素的,不要忘记重置根元素字体大小:

XML/HTML Code复制内容到剪贴板
  1. html{font-size:100%;}   
  2. 完成后,你可以定义响应式字体:   
  3. @media (min-width:640px){body{font-size:1rem;}}   
  4. @media (min-width:960px){body{font-size:1.2rem;}}   
  5. @media (min-width:1200px){body{font-size:1.5rem;}}   
  6. 不理解rem的童鞋,在这里给大家推荐一篇写的不错的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)  

4.响应式设计需要注意的问题

1.宽度不固定,可以使用百分比

XML/HTML Code复制内容到剪贴板
  1. #head{width:100%;}   
  2. #content{width:50%;}  

2.图片处理

在这里我给大家一把钥匙,有人会说,博主,能不能别装逼?图片处理还有啥钥匙,你以为是开门啊,博主,醒醒吧

哎哟 ,我这暴脾气,我说的钥匙不是真的钥匙,而是指图片处理的万能方法,是什么呢?就是图片液态化。接着 会有人问:“什么是图片液态化”呢?这个问题问的很好,给你打99分,多给你一分怕你骄傲,大家都知道水无形 能适合很多容器,那么假如我们把图片当做水 是不是就可以实现图片自适应问题了呢?

在html页面中的图片,比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度,如:

XML/HTML Code复制内容到剪贴板
  1. #wrap img{   
  2.         max-width:100%;   
  3.         height:auto;   
  4.     }   
  5.     如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充,height为auto的设置是为了保证图片原始的高宽比例,以至于图片不会失真。  

除了img标签的图片外我们经常会遇到背景图片,比如logo为背景图片:

XML/HTML Code复制内容到剪贴板
  1. #log a{display:block;   
  2.             width:100%;   
  3.             height:40px;   
  4.             text-indent:55rem;   
  5.             background-img:url(logo.png);   
  6.             background-repeat:no-repeat;   
  7.             background-size:100% 100%;   
  8.             }   
  9.     background-size是css3的新属性,用于设置背景图片的大小,有两个可选值,第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值,那么另一个值默认为auto。   
  10.     background-size:cover; 等比扩展图片来填满元素   
  11.     background-size:contain; 等比缩小图片来适应元素的尺寸  

最后我们来总结下响应式布局的实现原理

首先我们应该遵循移动端优先,交互和设计以移动端为主,pc则作为移动端的扩展,一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体)

XML/HTML Code复制内容到剪贴板
  1. 1.响应式布局   
  2.     1.Meta标签定义   
  3.     2.使用Media Queries适配对应样式   
  4. 2.响应式内容   
  5.     1.响应式图片   

我知道各位还在期待什么,无图无真相,无dome不是瞎说吗,纸上谈兵,放心各位,博主不会这么讨打的下面就贡献出个人制作的响应式布局dome.

XML/HTML Code复制内容到剪贴板
  1. git html 代码https://github.com/lifenglei/mygit/blob/master/xiang.html   
  2. css代码 https://github.com/lifenglei/mygit/blob/master/xiang.css  

好了 博主绞尽乳汁的成果就在这里了,下次我会总结下移动端的布局。

以上这篇响应式布局总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持突袭网。

原文地址:http://www.cnblogs.com/dreamsboy/archive/2016/07/09/5656009.html

  • 本文相关:
  • web网页开发面试笔试必备小知识(必看)
  • 响应式设计你需要了解的知识点
  • 浅谈响应式设计
  • 关于CSS absolute与relative不得不说的话
  • 浅谈网页颜色的搭配技巧(前端必看)
  • 关于HTML面试题全部汇总
  • html、css基础注意点(前端必看篇)
  • 前端AI切图小技巧(心得)
  • 浅谈网页中的字体的设置
  • 浅谈H标签定义和注意事项
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved