bloglogobloglogobloglogobloglogo
  • 首页
  • 营销&建站
    • SEO
    • PHP
    • wordpress
    • 自媒体
    • 前端开发
    • 网站建设
    • 网络营销推广
  • 运维&系统
    • mysql
    • Linux
    • 系统运维
    • 运维技术
    • 网络安全
  • 资源&工具
    • 资源
    • 工具
    • 前端工具
    • 搜索方法/工具
    • app打包开发
  • 生活
  • 首页
  • 营销&建站
    • SEO
    • PHP
    • wordpress
    • 自媒体
    • 前端开发
    • 网站建设
    • 网络营销推广
  • 运维&系统
    • mysql
    • Linux
    • 系统运维
    • 运维技术
    • 网络安全
  • 资源&工具
    • 资源
    • 工具
    • 前端工具
    • 搜索方法/工具
    • app打包开发
  • 生活

响应式设计三部曲

  • 首页
  • 前端开发
  • 响应式设计三部曲
常用meta整理
2015年3月9日
HTML 5的消息通知机制
2015年3月9日
2015年3月9日
分类
  • 前端开发
标签
  • 响应式设计

原文:Responsive Design in 3 Steps

译文:响应式设计的三个步骤

译者:dwqs

现在,响应式Web设计无疑是非常流行的。如果你对响应式设计还不熟悉,可以看看我之前发表过的关于这方面的responsive sites。对于新人,responsive design可能听起来有点复杂,但实际上,它比你想的要简单的多。为了帮助你快速入门响应式Web设计,我写了一篇快速入门教程。我保证你通过三步就可 以学会响应式设计的基本逻辑和媒体查询(media query)(假设你有基本的CSS知识)。

第一步:Meta标签(看demo)

大部分移动浏览器会把HTML页面缩放成较宽的viewport的宽度,这样内容就可以屏幕上正确的展示了。你可以使用viewport这个 meta标签 来重置这个行为。下面的viewport标签告诉浏览器使用设备宽度(device-width)做为viewport的宽度,并且禁用初始的缩放比例。 在<head>中加入这个meta标签。

meta name="viewport" content="width=device-width, initial-scale=1.0">

IE 8以及更早版本不支持媒体查询,你可以使用media-queries.js或者respond.js来增加IE对媒体查询的支持。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]—>

第二步:HTML结构

在这个例子中,我拥有一个由头部,内容容器,侧边栏,以及一个底部构成的基本的页面布局。头部拥有一个固定的180px高度,内容容器600px宽,然后侧边栏是300px宽。

bVkude

第三步:媒体查询

CSS3 media query是进行响应式设计的戏法,它跟写if条件一样,来告诉浏览器对于特定的viewport宽度如何渲染页面。

下面的规则是针对视口宽度小于等于980px设计的。基本上,我把所有容器的宽度从像素值改成了百分比值,这样容器就会变得具有流动性(fluid)。

bVkudj

然后对于宽度小于或等于700px的viewport,指定#content和#sidebar为自动宽度,并且移除浮动,所以他们可以以全宽度进行展示。

bVkudk

对于宽度小于等于480px(移动设备屏幕)的,重置#header的高度为auto,修改h1的字体大小为24px,并且隐藏#sidebar。

bVkudp

你可以想写多少媒体查询就写多少。我在demo中只展示了三个媒体查询。媒体查询的目的是对于指定的viewport宽度可以通过应用不同的CSS规则来获得不同的布局。媒体查询可以在同一个样式表中或者在一个单独的文件中。

总结

这个教程意图在于向你展示基本的响应式设计,如果你想更深入的了解,可以看看我之前的文章:Responsive Design With Media Queries.

原文首发:http://www.ido321.com/1395.html

王金阁
王金阁
王金阁,7年网络营销运营推广经验。网络新闻媒体资源欢迎采购,云服务器、虚拟主机、独享虚拟主机、企业邮箱、成品小程序也接定制欢迎详聊。托管代运营带维护多种合作方式总有你满意的,欢迎合作。QQ:909580330(微信同号)

相关文章

2019年8月11日

clearfix清除浮动进化史

2019年8月8日

利用htaccess做移动化适配301跳转

2019年8月8日

CSS3 @media 查询

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。

感谢支持 QQ909580330

网络媒体发稿找我,成品小程序价格优惠性价比高(预约、商城、点餐、外卖、展示、票务)
企业邮箱定制搭建

无需写代码建站 智能建站 智能站群

国内 香港 CN2 163 BGP云服务器

找博主更优惠QQ微信 909580330

最新文章

  • 0
    DedeCMS循环调用多级栏目及内容列表
    2021年1月1日
  • 0
    破解虚拟机登陆密码
    2021年1月1日
  • 0
    dd if=/dev/zero of=的含义是什么?Linux 下的dd命令使用详解
    2021年1月1日
  • 0
    FFmpeg视频处理详细的命令入门教程
    2020年12月8日
  • 0
    windows server 2012 r2使用ffmpeg提示计算机中丢失mfplat.dll
    2020年12月3日

文章分类

  • app打包开发
  • Linux
  • mysql
  • PHP
  • SEO
  • wordpress
  • 前端工具
  • 前端开发
  • 小说大全
  • 工具
  • 未分类
  • 生活点滴
  • 系统运维
  • 网站建设
  • 网络安全
  • 网络宣发服务
  • 网络营销推广
  • 自媒体
  • 资源共享
  • 运维技术
  • 运营

最新标签

  • 黑马程序员
  • 黑链
  • 黑猫SEO
  • 黑帽SEO
  • 黑帽
  • 黑客分类
  • 黑客
  • 页面跳转
  • 页面类型
  • 页面
  • 韩剧
  • 降权
  • 长尾词
  • 锚文本
  • 锚
  • 链轮
  • 重复
  • 采集
  • 配置
  • 邮箱
  • 邮件
  • 逐浪CMS
  • 远程访问
  • 远程执行代码
  • 进程
  • 运营
  • 软文推广
  • 软件开发
  • 跳转适配
  • 路由器防蹭网
  • 路由器设置
  • 路由
  • 超级签名
  • 负载均衡
  • 谷歌
  • 诊断
  • 评论
  • 解密
  • 融资
  • 虚拟机
  • 虚拟内存
  • 虚拟主机
  • 营销
  • 自适应
  • 自定义字段

有料标签

Android apache backtrack CentOS css DDOS dedecms docker FFmpeg Google htaccess html html5 iOS JavaScript jquery linux MariaDB MySQL Nginx ONLYOFFICE PHP PR Python seo SQL Sublime URL wdcp WEB wordpress wordpress优化 Wordpress加速 人人商城 外链 安全 招聘 搜狗微信搜索 标签 深入浅出Docker 猎头 百度 百度算法 运营 黑客
©2013-2020 王金阁博客. 网络营销推广工作者的博客网站(SEO SEM ASO 信息流)备案号:皖ICP备19015551号-1
  • 王金阁博客
  • 云服务器
  • 企业邮箱
  • 小程序
  • 微分销
  • 虚拟主机