用到的工具:
  • FireFox浏览器
  • Sublime Text 2

响应式布局定义:

2010年,Ethan Marcotte提出,可查看原文

通俗地讲就是:百份比布局,根据不同设备显示不同布局;
这次主要解决:传统的固定像数(px)相比:
  • 不同显示设备,使用不同布局。例如:PC屏幕,显示3栏;手机,显示为1栏;用到media query(媒体查询),它的用法,例如:
    • @media screen and (min-width: 481px) :屏幕最小481px,即大于481px适用;
    • @media screen and (max-width: 480px) :屏幕最大480px,即小于480px适用;
    • @media print and (monochrome):打印机,黑白,适用;
  • 宽度使用百份比,横屏与竖屏会自动伸缩;
先看看原始素材的效果,原始素材下载
PC屏幕,3栏显示如下:
手机屏,显示不全:
 
先看看html的结构:
CSS里对应使用固定像数,这为了简单,只关注布局相关的CSS:
 
实现PC显示3栏,手机显示1栏的CSS:
.header {
background:url(images/w.png) no-repeat;
height: 200px;
}
.navigation {
min-height: 25px;
}
.header, .navigation, .footer {
clear: both;
} @media screen and (min-width: 481px)
{
body, .header, .navigation, .footer {
width: 960px;
}
.column {
margin: 10px 10px 0 0;
}
.navigation ul li {
width: 320px; /* 960/3 */
}
#visit {
width: 240px;
float: left;
}
#points {
width: 240px;
float: right;
}
#main {
margin: 10px 260px 0 250px;
width: 460px;
}
}
@media screen and (max-width: 480px)
{
body, .header, .navigation, .footer {
width: 320px;
}
.column {
margin: 10px 0;
/*红色分割线*/
border-bottom: 1px dashed red;
}
.navigation ul li {
width: 106.67px; /* 320/3 */
}
#visit,#points,#main {
width: 320px;
}
}
PC显示效果没变;
手机显示效果,变为了1栏,竖向滚动,这就是移动Web开始。
这里出现了横向滚动条,因为图片撑大了。
最后一步,将里面的宽度像数转为百份比,并控制图片大小不撑大父元素:
.header {
background:url(images/w.png) no-repeat;
height: 200px;
}
.navigation {
min-height: 25px;
}
.header, .navigation, .footer {
clear: both;
} @media screen and (min-width: 481px)
{
body, .header, .navigation, .footer {
width: 100%;
}
.column {
margin: 10px 1.042% 0 0;
}
.navigation ul li {
width: 33.33%; /* 960/3 */
}
#visit {
width: 25%;
float: left;
}
#points {
width: 25%;
float: right;
}
#main {
margin: 10px 27.083% 0 26.042%;
width: 47.92%;
}
} @media screen and (max-width: 480px)
{
body, .header, .navigation, .footer {
width: 100%;
}
.column {
margin: 10px 0;
border-bottom: 1px dashed red;
}
.navigation ul li {
width: 33.33%; /* 320/3 */
}
#visit,#points,#main {
width: 100%;
}
}
img, object{
max-width: 100%;
}
手机横屏效果:
全文完!
 

移动Web - 响应式布局开篇的更多相关文章

  1. “教你如何玩转Web响应式布局” 的更多相关文章

    “教你如何玩转Web响应式布局” 的更多相关文章 网址:http://www.360doc.com/relevant/641896074_more.shtml

  2. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  3. 从零开始学 Web 之 移动Web(六)响应式布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 【css】25个漂亮的响应式布局的web设计【转】

    响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...

  5. WEB前端响应式布局之BootStarp使用

    1.Bootstrap简介:1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的 ...

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

    写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...

  7. web前端学习(二)html学习笔记部分(9)-- 响应式布局

    1.2.23  响应式布局基础 1.2.23.1  响应式布局介绍 1.响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多终端 -- 而不是为每个终端做一个特定的版本.这个概 ...

  8. Bootstrap工具包--用于响应式布局和移动设备优先的web项目

    Bootstrap是用于前端开发的工具包,是一个css/html框架 用于响应式布局和移动设备优先的web项目 响应式布局--一个网站能兼容多个终端 有很多版本:v3,v4,v5   三个没啥区别  ...

  9. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

随机推荐

  1. Oracle数据库表空间 数据文件 用户 以及表创建的SQL代码

    --create the tablespace CREATE SMALLFILE TABLESPACE "TABLE_CONTAINER" --创建表空间 DATAFILE 'E: ...

  2. 【81.37%】【codeforces 734B】Anton and Digits

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  3. docker入门1: Dockerfile介绍

    Dockerfile是为快速构建docker image而设计的,当你使用dockerbuild 命令的时候,docker 会读取当前目录下的命名为Dockerfile(首字母大写)的纯文本文件并执行 ...

  4. LockWindowUpdate的函数的用法

    Application.ProcessMessages;LockWindowUpdate(Self.Handle); //锁住当前窗口 LockWindowUpdate(0)//解除锁定窗口 Lock ...

  5. 电讯“情趣me”为什么命途多舛?

        古人有句话叫做战争"鼓作气,再而衰,三而竭",意思是打仗必须"一气呵成".才干发挥最大实力,取得最好的战绩.所谓商场如战场,经商也是如此,近期,中国电信 ...

  6. 《Planet Earth II》观看笔记

    carrion:n. 腐肉:臭尸:不洁之物 cub:n. 幼兽:不懂规矩的年轻人:chick; n. 小鸡:小鸟:少妇 herd:兽群: 1. 高频单词 terrain:n. [地理] 地形,地势:领 ...

  7. python代码风格检查工具──pylint

    pylint是一个python代码检查工具,可以帮助python程序员方便地检查程序代码的语法和风格,通过这个工具,可以使你的python代码尽量保持完美,哈哈.具体可以检查什么东西呢?比如你写了 f ...

  8. 【C/S通信交互之Http篇】Cocos2dx(Client)使用Curl与Jetty(Server)实现手机网游Http通信框架(内含解决curl.h头文件找不到问题)

    之前已经分享过一篇基于Cocos2dx与服务器使用Socket进行通信的框架,还不太熟悉的请移步到如下博文中: [C/S通信交互之Socket篇]Cocos2dx(Client)使用BSD Socke ...

  9. MVC 用基架创建Controller,通过数据库初始化器生成并播种数据库

    1 创建MVC应用程序 2 在Model里面创建实体类 using System; using System.Collections.Generic; using System.Linq; using ...

  10. WPF 自定义范围分组

    <Window x:Class="ViewExam.MainWindow"        xmlns="http://schemas.microsoft.com/w ...