响应式布局之微软商城部分开发
今天，博主带来的分享是响应式布局之微软商城的开发，，页面比较庞大，博主仅仅开发了一部分！我们先来贴下效果吧！
pc端，pad端比较像，就是间距发生变化的问题，因此博主这里仅仅开发了PC端与移动端的响应式布局！
PC端效果：
移动端效果：
几乎主流设备都可以兼容！
好了，下面正式开始：响应式，顾名思义，可以直白的理解成即可输出，即为当输入发生变化的时候，输出也会随之变化，并且大多数都是一一对应的关系，，可以直接拿函数的概念来理解就可以了！
那么问题来了，响应式布局与纯碎的移动端布局有什么区别呢？
可以这样说，纯碎移动端只考虑移动端设备就可以了，但是响应式布局就好像数学中的实数集合R，即为要兼容几乎所有的设备！（PC、各种手机、pad）并且只有一套HTML结构，拥有至少2套的CSS样式表，不同的是在不同的设备上显示与否！显示与否就要用到display这个属性了！
博主觉得响应布局并不难，把握好如何提取共同点，找出不同点，css功夫到位，无非就是在哪里显示的问题！
好了，下边贴下代码：
第一部分HTML部分：
<!DOCTYPE html
>
<
html
lang=
"en"
class=
"html"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
meta
name=
"viewport"
id=
"viewport"
content=
"width=device-width, initial-scale=1,
user-scaleable=0"
>
<
meta
name=
"viewport"
id=
"viewport"
content=
"width=device-width,initial-scale=1,user-scalable=0"
>
<
link
rel=
"stylesheet"
href=
"style/reset.css"
type=
"text/css"
>
<
link
rel=
"stylesheet"
href=
"style/common.css"
type=
"text/css"
>
<
link
rel=
"stylesheet"
href=
"style/pad.css"
type=
"text/css"
media=
"(min-width:768px)"
>
<
link
rel=
"stylesheet"
href=
"style/pc.css"
type=
"text/css"
media=
"(min-width:1000px)"
>
<
link
rel=
"stylesheet"
href=
"style/pc-w.css"
type=
"text/css"
media=
"(min-width:1200px)"
>
</
head
>
<
body
>
<
div
class=
"wrgg"
>
Surface精选机型 | 参与以旧换新，享额外补贴高达1,000元。先购机，享返现。
<
a
href=
"#"
>立即购买>
</
a
>
</
div
>
<
div
class=
"g_header "
>
<
div
class=
"clearfix cw "
>
<
a
href=
"#"
class=
"u_logo fl"
></
a
>
<
div
class=
"m_header_icon fr"
>
<
a
href=
""
class=
"u_help pcshow"
>支持与帮助
</
a
>
<
a
href=
"#"
class=
"u_search iconfont pchide "
>

</
a
>
<
a
href=
"#"
class=
"u_shop iconfont"
>

</
a
>
<
a
href=
"#"
class=
"u_user iconfont pchide"
>

</
a
>
<
a
href=
""
class=
"u_login pcshow"
>登录
</
a
>
</
div
>
</
div
>
</
div
>
<
div
class=
"g_nav"
>
<
div
class=
"g_nav_bd cw clearfix"
>
<
a
href=
"#"
class=
"u_wrlink"
>微软官方商城
</
a
>
<
a
href=
"#"
class=
"u_menu_btn u_mb_active iconfont pchide"
>

</
a
>
<
div
class=
"g_nav_list "
>
<
ul
class=
"m_nav_list "
>
<
li
class=
"m_drog_menu "
id=
"box"
>
<
a
href=
""
>硬件
</
a
>
<
ul
class=
"hide"
>
<
li
><
a
href=
""
>Surface
</
a
></
li
>
<
li
><
a
href=
""
>电脑与平板
</
a
></
li
>
<
li
><
a
href=
""
>Xbox+游戏
</
a
></
li
>
<
li
><
a
href=
""
>虚拟与混合实现
</
a
></
li
>
<
li
><
a
href=
""
>配件
</
a
></
li
>
</
ul
>
</
li
>
<
li
class=
"m_drog_menu"
id=
"box"
>
<
a
href=
""
>软件
</
a
>
<
ul
class=
"hide"
>
<
li
><
a
href=
""
>Office
</
a
></
li
>
<
li
><
a
href=
""
>Windows
</
a
></
li
>
<
li
><
a
href=
""
>APPS and Window10游戏
</
a
></
li
>
<
li
><
a
href=
""
>Visual Studio
</
a
></
li
>
<
li
><
a
href=
""
>其他软件与服务
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href=
""
>商务
</
a
></
li
>
<
li
><
a
href=
""
>教育
</
a
></
li
>
<
li
><
a
href=
""
>以旧换新
</
a
></
li
>
<
li
><
a
href=
""
>支持与帮助
</
a
></
li
>
<
li
><
a
href=
""
class=
"pchide"
>客服热线：4008822059
</
a
></
li
>
<
li
><
a
href=
""
>订单跟踪
</
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
<
div
class=
"g_banner"
>
<
div
class=
"m_banner"
>
<
a
href=
"https://www.microsoftstore.com.cn/
surface/surface-laptop/p/mic2372?Icid=Rollherobannernavigation2_
SurfaceLaptopLTE_20180525"
class=
"box1"
></
a
>
<
div
class=
"cw clearfix"
></
div
>
<
img
src=
"images/02.jpg"
alt=
""
class=
"autoimg"
>
</
div
>
</
div
>
<
div
class=
"cont_nav pcshow"
>
<
div
class=
"cont_nav_left "
id=
"div1"
>
<
ul
>
<
li
>产品类别
</
li
>
<
li
><
a
href=
""
>Surface Pro
</
a
></
li
>
<
li
><
a
href=
""
>Surface Laptop
</
a
></
li
>
<
li
><
a
href=
""
>Surface Book2
</
a
></
li
>
<
li
><
a
href=
""
>Xbox+游戏
</
a
></
li
>
<
li
><
a
href=
""
>Office
</
a
></
li
>
<
li
><
a
href=
""
>Windows
</
a
></
li
>
<
li
><
a
href=
""
>Microsoft HoloLens
</
a
></
li
>
<
li
><
a
href=
""
>教育优惠
</
a
></
li
>
</
ul
>
</
div
>
<
div
class=
"cont_nav_right"
>
<
ul
>
<
li
><
img
src=
"images/03.jpg"
alt=
""
>
<
div
class=
"text4"
>
探索Surface家族，选择高性能、高颜值的笔记本或创意工作室
</
div
>
<
span
><
a
href=
""
>查看详情>
</
a
></
span
>
</
li
>
<
li
><
img
src=
"images/04.jpg"
alt=
""
>
<
div
class=
"text5"
>
Xbox One S 1TB 家庭娱乐套装全新发售，附赠五款游戏，
欢乐全家共享
</
div
>
<
span
><
a
href=
""
>立即购买>
</
a
></
span
>
</
li
>
<
li
><
img
src=
"images/05.jpg"
alt=
""
>
<
div
class=
"text6"
>
兼容PC以及Mac，独享更多高效新功能，订阅期内享受持续更新
</
div
>
<
span
><
a
href=
""
>立即购买>
</
a
></
span
>
</
li
>
</
ul
>
</
div
>
</
div
>
<
div
class=
"mobile pchide autoimg clearfix"
>
<
ul
>
<
a
href=
""
><
li
><
img
src=
"images/07.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/08.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/09.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/10.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/07.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/08.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/09.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/10.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/07.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/08.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/09.png"
alt=
""
></
li
></
a
>
<
a
href=
""
><
li
><
img
src=
"images/10.png"
alt=
""
></
li
></
a
>
</
ul
>
</
div
>
<
footer
>
<
div
class=
"footer"
>
</
div
>
</
footer
>
</
body
>
</
html
>
第二部分，移动端设备common.css
@font-face {
font-family:
'iconfont';
src:
url(
'../font/iconfont.eot');
src:
url(
'../font/iconfont.eot?#iefix')
format(
'embedded-opentype'),
url(
'../font/iconfont.woff')
format(
'woff'),
url(
'../font/iconfont.ttf')
format(
'truetype'),
url(
'../font/iconfont.svg#iconfont')
format(
'svg');
}
.iconfont{
font-family:
"iconfont"
!important;
font-size:
16px;
font-style:
normal;
-webkit-font-smoothing:
antialiased;
-webkit-text-stroke-width:
0.2px;
-moz-osx-font-smoothing:
grayscale;
}
body{
font-family: punctuation, PingFangSC-Regular,
"Microsoft YaHei",
"微软雅黑";
}
/*顶部广告条*/
.wrgg{
background-color:
#002050;
height:
33px;
color:
#FFF;
line-height:
33px;
font-size:
12px;
text-align:
center;
}
.wrgg a{
color:
#FFF;
text-decoration:
underline;
}
/*logo 搜索等等。*/
.g_header{
padding:
12px;
background-color:
#F5F5F5;
}
.u_logo{
width:
95px;
height:
20px;
background:
url(
../images/logo.jpg)
0
0
no-repeat;
float:
left;
margin-top:
20px;
}
.m_header_icon a{
display:
block;
height:
20px;
line-height:
20px;
font-size:
20px;
color:
black;
margin-left:
35px;
float:
left;
}
html .pcshow{
display:
none;
}
/*导航*/
.g_nav{
border-bottom:
solid
1px
#666;
}
.g_nav_bd{
padding:
0
0
0
12px ;
height:
50px;
line-height:
50px;
position:
relative;
}
.u_wrlink{
font-size:
14px;
float:
left;
}
.u_menu_btn{
float:
right;
width:
48px;
height:
48px;
border:
solid
1px
#FFF;
line-height:
48px;
text-align:
center;
font-size:
30px;
}
.u_mb_active{
border-left-color:
#666;
border-top-color:
#666;
color:
red;
border-bottom:
solid
1px
#FFF;
height:
49px;
}
.g_nav_list{
position:
absolute;
left:
0px;
top:
100%;
color:
blue;
width:
100%;
}
.m_nav_list{
padding-left:
20px;
}
.m_nav_list ul{
padding-left:
20px;
}
.m_drog_menu ul{
display:
none;
}
.m_drog_menu ul li{
float:
none;
}
.m_drog_menu ul a{
display:
block;
padding-left:
40;
}
.m_nav_list ul a{
color:
black;
}
.m_nav_list ul a:hover{
background-color:
lightblue;
}
/*焦点图*/
.html .hide{
display:
none;}
.autoimg{
max-width:
100%;
}
.footer{
width:
100%;
height:
200px;
background-image:
linear-gradient(
#666,
#ccc)
}
.mobile{
display:
inline-block;
width:
86%;
}
.mobile img{
width:
20%;
height:
20%;
float:
right;
border:
solid
1px
#ccc;
}
第三部分pc端，pc.css
.u_search_input{
width:
460px;
border:
solid
1px
#666;
height:
18px;
line-height:
18px;
padding:
0
10px;
display:
inline-block;
margin-left:
35px;
}
.m_header_icon .u_help,
.m_header_icon .u_login{
font-size:
12px;
}
/*导航*/
.g_nav_list{
position:
static;
margin-left:
155px;
}
.g_nav_list li{
float:
left;
margin-right:
15px;
position:
relative;
}
.m_nav_list ul{
display:
block;
position:
absolute;
left:
0;
top:
100%;
border:
solid
1px
#666;
border-top:
none;
margin-top:
-1px;
background-color:
#fff;
z-index:
2;
}
.m_nav_list a{
padding:
0
20px;
}
.m_nav_lis ul a{
white-space:
nowrap;
padding:
0
20px;
}
.m_drog_menu ul{
width:
200px;
position:
absolute;
}
.g_banner .m_banner{
height:
300px;
width:
1180px;
margin-left:
auto;
margin-right:
auto;
}
.g_banner{
position:
relative;
}
.g_banner .box1{
display:
block;
background-color:
#fff;
width:
81px;
height:
26px;
position:
absolute;
top:
36px;
margin-left:
81px;
opacity:
0;
}
.cont_nav{
position:
relative;
width:
1180px;
height:
334px;
margin-left:
auto;
margin-right:
auto;
margin-top:
120px;
}
.cont_nav .cont_nav_left,.cont_nav_left a{
float:
left;
color:
#fff;
font-size:
20px;
line-height:
20px;
}
.cont_nav .cont_nav_left{
width:
256px;
height:
336px;
background-color:
blue;
}
.cont_nav_left li{
padding-top:
30px;
text-align:
center;
}
.cont_nav_left a{
margin-left:
25%;
}
.cont_nav_left a:hover{
text-decoration:
underline;
}
.cont_nav_right li{
float:
left;
padding-left:
24px;
}
.cont_nav_right .text4,.text5,.text6{
width:
282px;
font-size:
20px;
margin-top:
10px;
}
.cont_nav_right span{
display:
inline-block;
font-size:
20px;
margin-top:
40px;
}
.cw{
width:
1180px;
margin-left:
auto;
margin-right:
auto;
}
html .pcshow{
display:
block;
}
html .pchide{
display:
none;
}
第四部分reset.css（包括常用的一些设置）
@charset
"UTF-8";
html {
font-family:
sans-serif;
-ms-text-size-adjust:
100%;
-webkit-text-size-adjust:
100%;
overflow-y:
scroll;
-webkit-overflow-scrolling:
touch; }
body {
margin:
0;
font-size:
14px;
line-height:
1.5;
color:
#333;
background-color:
#fff; }
a {
background:
transparent;
text-decoration:
none;
color:
#08c; }
a:active,a:hover {
outline:
0; }
a:hover {
color:
#006699; }
img {
border:
none;
vertical-align:
middle;
-ms-interpolation-mode: bicubic; }
button,input,optgroup,select,textarea {
color:
inherit;
font:
inherit;
margin:
0; }
button,select {
text-transform:
none; }
button,html input[
type=
"button"
],input[
type=
"reset"
],input[
type=
"submit"
] {
-webkit-appearance: button;
cursor:
pointer; *
overflow:
visible; }
button[
disabled
],html input[
disabled
] {
cursor:
default; }
button::-moz-focus-inner,input::-moz-focus-inner {
border:
0;
padding:
0; }
input {
line-height:
normal; }
input[
type=
"checkbox"
],
input[
type=
"radio"
] {
box-sizing:
border-box;
padding:
0; *
height:
13px; *
width:
13px; }
input[
type=
"number"
]::-webkit-inner-spin-button,
input[
type=
"number"
]::-webkit-outer-spin-button {
height:
auto; }
input[
type=
"search"
] {
-webkit-appearance: textfield;
box-sizing:
content-box; }
input[
type=
"search"
]::-webkit-search-cancel-button,
input[
type=
"search"
]::-webkit-search-decoration {
-webkit-appearance:
none; }
input {
margin:
0;
padding:
0;
border:
none;
background-color:
transparent;
outline:
none; }
textarea {
overflow:
auto;
resize:
vertical;
resize:
none; }
table {
border-collapse:
collapse;
border-spacing:
0; }
td,th {
padding:
0; }
html,button,input,select,textarea {
font-family:
"Microsoft Yahei",
"微软雅黑",
"SimSun",
"宋体",
"Verdana",
"Arial"; }
h1,h2,h3,h4,h5,h6,p,figure,form,blockquote {
margin:
0; }
ul,ol,dl,dd {
margin:
0;
padding:
0; }
ul,ol {
list-style:
none
outside
none; }
h1,h2,h3 {
line-height:
2;
font-weight:
normal; }
h1 {
font-size:
21px; }
h2 {
font-size:
18px; }
h3 {
font-size:
16px; }
h4 {
font-size:
14px; }
h5,h6 {
font-size:
12px;
text-transform:
uppercase; }
input:-moz-placeholder,textarea:-moz-placeholder {
color:
#ccc; }
input::-moz-placeholder,textarea::-moz-placeholder {
color:
#ccc; }
input:-ms-input-placeholder,textarea:-ms-input-placeholder {
color:
#ccc; }
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
color:
#ccc; }
a { blr: expression(this.onFocus=this.
blur())}
a {
outline:
none; }
em,i {
font-style:
normal; }
.clearfix:before,.clearfix:after {
content:
"";
display:
table; }
.clearfix:after {
clear:
both; }
.clearfix { *
zoom:
1; }
.fl {
float:
left; }
.fr {
float:
right; }