仿苹果响应式官网(含代码!)

一、响应式开发原理

1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。

设备的划分情况:

+ 小于768的为超小屏幕(手机)
+ 768~992之间的为小屏设备(平板)
+ 992~1200的中等屏幕(桌面显示器)
+ 大于1200的宽屏设备(大桌面显示器)

1.2 响应式布局容器

响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。

原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。

父容器版心的尺寸划分

+ 超小屏幕(手机,小于 768px):设置宽度为 100%
+ 小屏幕(平板,大于等于 768px):设置宽度为 750px
+ 中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
+ 大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px 

但是我们也可以根据实际情况自己定义划分

二、怎样使用media

仿苹果响应式官网(含代码!)_第1张图片

Media所有参数汇总 
width:浏览器可视宽度。 
height:浏览器可视高度。 
device-width:设备屏幕的宽度。 
device-height:设备屏幕的高度。 
orientation:检测设备目前处于横向还是纵向状态。(landscape/portrait) 
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9) 
device-aspect-ratio:检测设备的宽度和高度的比例。 
color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色,向所有能显示颜色的设备应 用样式表) 
color-index:检查设备颜色索引表中的颜色,他的值不能是负数。 
monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到) 
resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。 
grid:检测输出的设备是网格的还是位图设备,如果设备是基于网格的(例如电传打字机终端或只能显示一 种字形的电话),该值为1,否则为0

1)首先需要在html文档中添加以下代码,用来兼容移动设备的显示效果

 是否允许屏幕缩放

    width=device-width:宽度等于当前设备的宽度 
    initial-scale=1:初始的缩放比例(默认为1) 
    maximum-scale=1:允许用户缩放到得最大比例(默认为1) 
    user-scalable=no:用户不能手动缩放

2)怎样在CSS文件中写CSS响应式媒体查询

例: 
@media screen and (max-width:720px) and (min-width:320px){ body{ background-color:red; } }
@media screen and (max-width:320px){ body{ background-color:blue; } }

三、响应式设计

仿苹果响应式官网(含代码!)_第2张图片

四、最终实现效果

仿苹果响应式官网(含代码!)_第3张图片
仿苹果响应式官网(含代码!)_第4张图片
仿苹果响应式官网(含代码!)_第5张图片
仿苹果响应式官网(含代码!)_第6张图片

五、具体实现(代码)

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	head>
	<body>
		
		<div class="header">
			<div class="header-main">
				<广告>
			div>
		div>
		
		<div class="nav">
			<div class="nav-main">
				<a href="" class="logo">a>
				<a href="" class="nav-item">Maca>
				<a href="" class="nav-item">iPada>
				<a href="" class="nav-item">iPhonea>
				<a href="" class="nav-item">Watcha>
				<a href="" class="nav-item">Musica>
				<a href="" class="nav-item">技术支持a>
				<div class="search">div>
				<div class="shop-bag">div>
			div>
			<div class="nav-mobile">
				<input type="checkbox" name="" id="menu-check" value="" style="display: none;"/>
				<label href="" class="mobile-list" for="menu-check">
					<div class="line">div>
					<div class="line">div>
				label>
				<a href="" class="logo">a>
				<a href="" class="shop-bag">a>
				<div class="menu">
					<div class="searchInput">
						<span class="icon">span>
						<span type="" name="" id="" value="" class="input" />搜索 apple.com.cnspan>
					div>
					<div class="menulist">
						<a href="" class="menu-item">Maca>
						<a href="" class="menu-item">iPada>
						<a href=""

你可能感兴趣的:(前端,响应式布局,css,html,html5,css3,前端)