文档章节

媒介查询和响应式设计

IrisHuang
 IrisHuang
发布于 2016/10/29 22:30
字数 940
阅读 26
收藏 1

这两天看了《css高效开发实战》这本书,收获颇丰。尽管这本书对css3的很多知识讲解得不深,代码也存在一些小错误,但是优点也很明显,就是关于css的设计的知识点很全面。我们可以根据这本书提到的知识进行细致全面的学习,我相信,几番学习下来,自己对css的认识会更加丰富和熟练。还记得刚学习css的时候,对css的不同分辨率下的写法一直比较懵逼,现在终于有了一个比较清晰的认识。现在对媒介查询和响应式设计部分做一个简单的总结。 首先说css3的媒介查询,它是响应式设计最最基础的技术。@media规则使我们在相同的而样式表中,针对不同的媒介来使用不同的样式规则。Media Type中使用最多的是screen和print类型;

媒介查询的基本语法:

引用方法1

@media screen and (max-width:600px){
    .class{background-color:#333;}
}
这段代码定义了小于600px的窗口所应用的样式。

引用方法2:

<link media="only screen and (max-device-width:480px)" href="style.css">

常见浏览器终端的宽度和高度

  • 老式4:3屏幕的pc最小分辨率、ipad mini、ipad2、ipad3:1024x768
  • 普通的14英寸笔记本:1366x768
  • 7英寸安卓平板、800x480~1920X1200
  • iphone4/4s、其他安卓3.5寸智能手机:320x480
  • 5英寸+大屏幕手机:400x640~1920x1080 宽度的几个分界线:小屏幕:320px以下/大屏手机"320~768px/平板电脑:768~1024px/PC设备:1024以上

检测设备翻转:

<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css”/>//竖屏
<link rel="stylesheet" media="screen and (orientation:lanscape)" href="landscape.css”/>//横屏

响应式网页设计的基本原则

  1. 重要内容优先:小屏幕优先显示重要内容 2.提供清晰和友好的手指操作链接 3.体验的一致性 4.考虑移动操作习惯:左手握、右手点

在实战项目中,原书的代码存在一些错误,这是我亲自测试过的正确代码

其中为了兼容IE9以下,要加一个兼容性的js库,目前比较流行的是media-aueries.js、respond.js和html5shiv.js.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="blank"/>
	<meta name="format-detection" content="telephone=no"/>
	<--[if it IE9]><script type="text/javascript" src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]>
	<style type="text/css">
	body{margin:0;padding: 0}
	.container{
		width:80%;margin:0 auto;
	}
	.header{
		background-color: #333;
	}
	li a{color: white;}
	/*这部分是公共样式*/
	@media screen and (max-width: 320px){
		.logo{height: 40px;width:100%;display: block;}
		.header{height: 40px;}
	}
	li{
		line-height: 50px;
		padding:0 15px 0 15px;
		display: block;
		background-color: #333;
		text-align: center;
	}
	/*这里定义了窗体宽度在320px以下的像素*/
	@media screen and (min-width: 320px)and(max-width: 765px) {
		.logo{height: 50px;}
		.header{height: 50px;display: block;}
		li{
			line-height: 50px;
			padding: 0 15px 0 15px;
			display: block;
			background-color: #333;
			text-align: center;
		}
	}
	@media screen and (min-width: 765px) {
		.logo{
			height: 60px;
			float: left;
			display:block;
			width: 20%;}
		.header{height: 60px;
		}
		li{
			display: block;
			line-height: 60px;
			float: left;
			width:15%;
		}
	}
	/*这里定义了窗体宽度765px以上的样子*/
	</style>
</head>
<body>
	<div class="container">
	<div class="header">
		<img src="001.png" class="logo"/>
		<li><a href="#">热门帖子</a></li>
		<li><a href="#">精华帖子</a></li>
		<li><a href="#">最新原创</a></li>
		<li><a href="#">文档翻译</a></li>
	</div>
	</div>
</body>
</html>

不同屏幕的显示效果为 320x480 1024x768 1920x900

© 著作权归作者所有

IrisHuang
粉丝 3
博文 68
码字总数 39102
作品 0
武汉
前端工程师
私信 提问
使用 Bootstrap 和 Spring MVC 实现响应式 Web 设计

简介 响应式Web设计是一种创建Web应用程序的新方法。一旦采用响应式Web设计创建出应用程序,那么该Web应用程序将能轻而易举地运行于包括移动和手持设备在内的任意设备之上。Twitter公司开源了...

oschina
2013/02/14
22.8K
16
响应式设计基础

1. 前期准备 响应式提出:2010年; 三大技术成分: 流动网格 弹性图片 媒介查询 优点: 减少工作量 节省时间 搜索优化 缺点: 会加载更多的样式 设计比较难精确定位和控制 老版本浏览器兼容不...

可汗爷爷
2018/01/11
0
0
如何利用栅格系统完成后台页面响应式设计(自己学习)

如何利用栅格系统完成后台页面响应式设计,介绍响应式设计的思路与方法。 一、什么是响应式? 按照本人自己的理解,响应式就是通过合理的设计方案配合规范的技术实现策略,使同一个 Web页面在...

石叶子
2018/12/06
0
0
移动web开发———第三天

一、响应式开发 1、响应式布局, 就是一个网站能够兼容多个终端。 2、响应式开发的原理 CSS3中的Media Query(媒介查询,and之后一定要加空格@media screen and (min-width: 768px) and (max...

我是小谷粒
2018/02/05
0
0
如何用 Flexbox 构建一个响应式导航栏

在本文中,我将解释如何使用 Flexbox 以及媒体查询(Media Queries)来创建适应各种屏幕大小的导航栏。 本教程也可以在 Scrimba 上我的免费 Flexbox 课程中找到交互式视频录像。 要阅读更多关...

oschina
2018/01/31
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 ——不知道假装开心,装的像么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :天黑了 你很忧愁, 你说世界上, 找不到四块五的妞, 行走在凌晨两点的马路上, 你疲倦地拿着半盒黄鹤楼。#今日歌曲推荐# 《四块...

小小编辑
今天
2.2K
16
64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
69
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
32
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
119
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部