响应式布局之微软商城部分开发

最新推荐文章于 2024-05-23 11:12:13 发布

左手写爱等等

最新推荐文章于 2024-05-23 11:12:13 发布

阅读量680

点赞数

文章标签：响应式布局 CSS/CSS3 微软商城开发

本文链接：https://blog.csdn.net/qq_35788269/article/details/80558818

版权

响应式布局之微软商城部分开发

今天，博主带来的分享是响应式布局之微软商城的开发，，页面比较庞大，博主仅仅开发了一部分！我们先来贴下效果吧！

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 " 
  > 
  &#xe653; 
  </ 
  a 
  > 
 
 
 
 
  < 
  a 
  href= 
  "#" 
  class= 
  "u_shop iconfont" 
  > 
  &#xe601; 
  </ 
  a 
  > 
 
 
  < 
  a 
  href= 
  "#" 
  class= 
  "u_user iconfont pchide" 
  > 
  &#xe616; 
  </ 
  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" 
  > 
  &#xe65c; 
  </ 
  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 
  > 
 
 
  < 
 

最低0.47元/天解锁文章

左手写爱等等

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
响应式布局之微软商城部分开发

响应式布局之微软商城部分开发今天，博主带来的分享是响应式布局之微软商城的开发，，页面比较庞大，博主仅仅开发了一部分！我们先来贴下效果吧！pc端，pad端比较像，就是间距发生变化的问题，因此博主这里仅仅开发了PC端与移动端的响应式布局！PC端效果：移动端效果：几乎主流设备都可以兼容！好了，下面正式开始：响应式，顾名思义，可以直白的理解成即可输出，即为当输入发生变化的时候，输出也会随之变化，并且大多数...
复制链接

扫一扫