移动Web - 响应式布局开篇
- FireFox浏览器
- Sublime Text 2
响应式布局定义:
- 不同显示设备,使用不同布局。例如: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):打印机,黑白,适用;
- 宽度使用百份比,横屏与竖屏会自动伸缩;
.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;
}
}
.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 - 响应式布局开篇的更多相关文章
- “教你如何玩转Web响应式布局” 的更多相关文章
“教你如何玩转Web响应式布局” 的更多相关文章 网址:http://www.360doc.com/relevant/641896074_more.shtml
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- 从零开始学 Web 之 移动Web(六)响应式布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 【css】25个漂亮的响应式布局的web设计【转】
响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...
- WEB前端响应式布局之BootStarp使用
1.Bootstrap简介:1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的 ...
- web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
- web前端学习(二)html学习笔记部分(9)-- 响应式布局
1.2.23 响应式布局基础 1.2.23.1 响应式布局介绍 1.响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多终端 -- 而不是为每个终端做一个特定的版本.这个概 ...
- Bootstrap工具包--用于响应式布局和移动设备优先的web项目
Bootstrap是用于前端开发的工具包,是一个css/html框架 用于响应式布局和移动设备优先的web项目 响应式布局--一个网站能兼容多个终端 有很多版本:v3,v4,v5 三个没啥区别 ...
- web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
随机推荐
- 【codeforces 779D】String Game
[题目链接]:http://codeforces.com/contest/779/problem/D [题意] 给你一段操作序列; 按顺序依次删掉字符串1中相应位置的字符; 问你最多能按顺序删掉多少个 ...
- 一起学Python:字符串介绍
字符串介绍 <1>python中字符串的格式 如下定义的变量a,存储的是数字类型的值 a = 100 如下定义的变量b,存储的是字符串类型的值 b = "hello itcast ...
- win10 支持默认把触摸提升鼠标事件 打开 Pointer 消息
原文:win10 支持默认把触摸提升鼠标事件 打开 Pointer 消息 在 WPF 经常需要重写一套触摸事件,没有UWP的Pointer那么好用. 如果一直都觉得 WPF 的触摸做的不好,或想解决 ...
- GridLayout网格布局
网格布局特点: l 使容器中的各组件呈M行×N列的网格状分布. l 网格每列宽度相同,等于容器的宽度除以网格的列数. l 网格每行高度相同,等于容器的高度除以网格的行数. l 各组件的排列方式 ...
- How to configure spring boot through annotations in order to have something similar to <jsp-config> in web.xml?
JSP file not rendering in Spring Boot web application You will need not one but two dependencies (ja ...
- 使用JScript编译指定目录下所有工程
作者:朱金灿 来源:http://blog.csdn.net/clever101 我遇到这样一个问题:在一个插件工程目录下的插件工程越来越多,因此通过建一个解决方案然后把新增加的工程逐个添加进解决方案 ...
- 使用Adorner显示WPF控件的边界点
原文:使用Adorner显示WPF控件的边界点 当我们拖动WPF控件时,我们为了更清楚地需要显示控件,一般我们会在WPF控件所围成的矩形区域的四个边界点上作一个特殊的记号(比如圆点).如下图: 在Wi ...
- Leetcode 144 Binary Tree Preorder Traversal 二叉树
二叉树的基础操作:二叉树的先序遍历(详细请看数据结构和算法,任意本书都有介绍),即根,左子树,右子树,实现方法中还有用栈实现的,这里不介绍了 /** * Definition for binary t ...
- Linux性能测试 dmesg命令
dmesg 命令主要用来显示内核信息.使用 dmesg 可以有效诊断机器硬件故障或者添加硬件出现的问题. 另外,使用 dmesg 可以确定您的服务器安装了那些硬件.每次系统重启,系统都会检查所有硬件 ...
- 零元学Expression Design 4 - Chapter 1 入门界面简介
原文:零元学Expression Design 4 - Chapter 1 入门界面简介 Expression Design 是Expression系列里面的一员,更是Blend跟Web的好帮手 而在 ...