渠道经理 渠道经理 渠道经理
战略研究院  /  College
让你的网站变成响应式的3个简单步骤
  • 作者：
  • 来源：
  • 日期：2015/3/15 2:09:58

　　如今，一个网站只在桌面屏幕上好看是远远不够的，同时也要在平板电脑和智能手机中能够良好呈现。响应式的网站是指它能够适应客户端的屏幕尺寸，自动响应客户端尺寸变化。在这篇文章中，我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式(Responsive)。

1 – 布局

　　当创建一个响应式网站，或让现有的网站变成响应式的，首先要关注的元素的布局。我在建立响应式的网站，总是先创建一个非响应的布局，页面宽度固定大小。如果非响应版本完成得非常不错，我再添加媒体查询(Media Queries)和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。

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

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;} 
}
 
/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}


战略研究院  /  College