苏宁易购自适应屏幕移动端

最新推荐文章于 2022-12-01 18:55:14 发布
最新推荐文章于 2022-12-01 18:55:14 发布
阅读量576 收藏 17
点赞数 1
分类专栏： html web css 文章标签： css3 html5 vscode 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42583802/article/details/124896012
版权
html 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
css
12 篇文章 0 订阅
订阅专栏
web
8 篇文章 0 订阅
订阅专栏

 

                   

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>苏宁易购</title>
    <link rel="shortcut icon" href=" favicon.ico" />

</head>

<body>
    <!-- 顶部搜索框 -->
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <input type="search" placeholder="厨卫保季暖">
        </div>
        <div class="login">登录</div>
    </div>
    <!-- 广告部分 -->
    <div class="banner">
        <img src="upload/banner.gif" alt="">
    </div>
    <div class="ad">
        <a href="#">
            <img src="upload/ad1.gif" alt="">
        </a>
        <a href="#">
            <img src="upload/ad2.gif" alt="">
        </a>
        <a href="#">
            <img src="upload/ad3.gif" alt="">
        </a>
    </div>
    <!-- nav模块 -->
    <nav>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>
                苏宁秒杀
            </span>
        </a>
        <a href="#">
            <img src="upload/nav2.png" alt="">
            <span>
                苏宁超市
            </span>
        </a>
        <a href="#">
            <img src="upload/nav3.png" alt="">
            <span>
                苏宁拼购
            </span>
        </a>
        <a href="#">
            <img src="upload/nav4.png" alt="">
            <span>
                手机数码
            </span>
        </a>
        <a href="#">
            <img src="upload/nav5.png" alt="">
            <span>
                苏宁家电
            </span>
        </a>
        <a href="#">
            <img src="upload/nav6.png" alt="">
            <span>
                免费水果
            </span>
        </a>
        <a href="#">
            <img src="upload/nav7.png" alt="">
            <span>
                super会员
            </span>
        </a>
        <a href="#">
            <img src="upload/nav8.png" alt="">
            <span>
                签到有礼
            </span>
        </a>
        <a href="#">
            <img src="upload/nav9.png" alt="">
            <span>
                领券中心
            </span>
        </a>
        <a href="#">
            <img src="upload/nav10.png" alt="">
            <span>
                更多频道
            </span>
        </a>
    </nav>
    <!-- bottom模块 -->
    <div class="bottom">
        <div class="row">
            <a href="#">
                <img src="upload/bot1.jpg" alt="">
            </a>
            <a href="#">
                <img src="upload/bot2.jpg" alt="">

            </a>
        </div>
        <div class="row">
            <a href="#">
                <img src="upload/bot3.jpg" alt="">
            </a>
            <a href="#">
                <img src="upload/bot4.jpg" alt="">

            </a>
        </div>
        <div class="row">
            <a href="#">
                <img src="upload/bot5.jpg" alt="">
            </a>
        </div>
    </div>
</body>

</html>

css代码

html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;
  }
}
img {
  vertical-align: middle;
}
a {
  text-decoration: none;
}
body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background-color: #f2f2f2;
  font-size: 25px;
  height: 2000px;
}
.search-content {
  position: fixed;
  display: flex;
  left: 0;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15rem;
  height: 1.76rem;
  background-color: #ffc001;
  align-items: center;
}
.search-content .classify {
  width: 0.88rem;
  height: 1.4rem;
  background: url(../images/classify.png) no-repeat;
  background-size: 0.88rem;
  margin: 0 0.4rem;
}
.search-content .login {
  width: 1.5rem;
  height: 1.4rem;
  margin: 0 0.2rem;
  color: #fff;
  font-size: 0.5rem;
  text-align: center;
  line-height: 1.4rem;
}
.search-content .search {
  flex: 1;
}
.search-content .search input {
  width: 11.24rem;
  height: 1.32rem;
  border-radius: 1.32rem;
  border: 0;
  padding: 0 1rem;
  background-color: #fff2cc;
  color: #757575;
  font-size: 0.52rem;
  outline: none;
}
.banner {
  width: 15rem;
}
.banner img {
  width: 100%;
}
.ad {
  display: flex;
  width: 15rem;
  margin: 0.1rem 0;
}
.ad a {
  flex: 1;
}
.ad a img {
  width: 100%;
}
nav {
  width: 15rem;
  overflow: hidden;
  background-color: #f6f6f6;
  margin-bottom: 0.4rem;
}
nav a {
  float: left;
  width: 3rem;
  height: 2.8rem;
  color: #333;
  font-size: 0.5rem;
  text-align: center;
}
nav a img {
  display: block;
  width: 1.64rem;
  height: 1.64rem;
  margin: 0.2rem 0.68rem 0.06rem;
}
.bottom {
  width: 15rem;
}
.bottom .row {
  display: flex;
}
.bottom .row a {
  flex: 1;
  box-sizing: border-box;
}
.bottom .row a img {
  width: 100%;
}
.bottom .row:nth-child(-n+2) a:nth-child(1) {
  border-right: 1px solid #ccc;
}
.bottom .row:nth-child(3) a:nth-child(1) {
  border-top: 1px solid #ccc;
}

 

Bubble_Qi
关注
  • 1
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
移动端苏宁首页制作和rem
qq_44757223的博客
04-11 1251
制作苏宁移动端首页的两种方法、px转换为rem
苏宁易购（rem+媒体查询+移动端）
03-08
rem布局练习
苏宁11.11:苏宁易购移动端的架构优化实践
weixin_34186128的博客
11-10 489
双11，不仅是广大商家和消费者们的饕餮盛宴，同时也是各家电商公司的技术研发力量的实力体现。2016年苏宁易购双11首小时订单量增287%，移动端占比86%。为了给用户带来更好的体验，苏宁易购移动端团队一直以来追求 “极速、稳定、安全” 的目标，围绕这一共同目标，我们以小团队作战、敏捷的开发模式，开展了一系列工作，其中主要包括：\\\\（1）客户端架构解耦：为了保障App性能的稳定，适应业务的快熟发...
移动端rem布局 案例练习
MartinYP的博客
08-07 291
学习记录博客
苏宁易购移动端页面（附源码）
weixin_47627102的博客
10-14 4112
苏宁易购移动端简写首页（附源码） 源码链接：https://pan.baidu.com/s/1CXdE4t30e31Q3eJIGWlbRg 提取码：nbnb 其中有一些属性计算教冗余，建议大家使用vscode然后预装一下Easy LESS，运用less可以大大减少开发时间 以下是效果展示： ...
移动端项目-苏宁易购
weixin_45662026的博客
12-01 339
【代码】移动端项目-苏宁易购。
vuewaterfall瀑布流插件自适应PC移动端无需预设置高度
08-10
这是一款超轻量级的瀑布流组件，无需预设高度，支持PC和移动端。支持图片加载后重新调整顺序。
响应式个人博客资讯网站模板(自适应手机移动端).txt
03-09
响应式个人博客资讯网站模板(自适应手机移动端)
模板资源下载站整站源码(自适应手机移动端)内核.txt
最新发布
03-15
模板资源下载站整站源码(自适应手机移动端)内核.txt
响应式在线教育培训企业网站模板(自适应手机移动端).txt
03-09
响应式在线教育培训企业网站模板(自适应手机移动端)
苏宁易购 源码
03-17
苏宁易购 源码，
NewEBuy 苏宁易购ios源码 github版本
10-09
NewEBuy 苏宁易购ios源码 github版本 仅存下载链接 从速
手机端网站H5静态页面 仿苏宁移动端
06-22
手机端网站H5静态页面 仿苏宁移动端, 自适应，只有静态页，可供学习
最新仿苏宁易购商城源码（完整版）
05-15
最新仿苏宁易购商城源码（完整版）
苏宁易购模版
06-04
绝对商业版，测试完整可用，shopex4.85苏宁易购第二版/模板堂shopex4.85模板商业版/B2C网站程序！PHP+MySQL，压缩包里有安装说明，下载使用即可！ （1）使用“仿苏宁易购第二版全站”里的文件，运行http://域名/install/ ，安装shopex4.85。 （2）完成shopex4.85安装之后，http://域名/shopadmin/ 登陆shopex4.85。 （3）在后台选择“页面管理”—“模板管理”—“模板列表”—“使用模板”苏宁易购(Shopex4.8) 注释：分离出来的模板和插件文件在“仿苏宁易购第二版模板”文件夹中，需要的朋友可以在自己的Shopex4.8网站中使用。 程序介绍： 1、高仿苏宁易购第二版B2C网站程序采用ShopEx4.8.5内核，配以仿苏宁易购第二版风格，模版仿真率达95%以上，运行环境需支持PHP+MYSQL。 亲,试试微信扫
响应式医疗美容整形医院网站模板(自适应手机移动端).txt
03-09
响应式医疗美容整形医院网站模板(自适应手机移动端)
使用两种rem布局方案-实现静态苏宁易购移动端首页
SHoadgnaw的博客
03-29 2380
使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询htmlcommon.lessindex.less方案2:flexible.js+rem小插件小问题htmlindex.lessflexible.js 方案1:rem+less+媒体查询 跟其他页面不同的文件，需要新建common.less文件 用媒体查询设置不同的html字体大小 因为除了首页其他页面也要 尺寸为 320px 360px 375px 400px 414px 424px 480px 540px 720px
苏宁首页-手机端
weixin_44768794的博客
01-12 421
苏宁首页案例制作rem适配方案1代码import导入样式固定定位rem适配方案2代码 呈现图 rem适配方案1 代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,m
苏宁易购首页仿写代码-仅供参考# 话不多说,直接上代码,苏宁易购手机app网站首页,仅供参考
欢乐打代码！
09-21 1270
苏宁易购首页仿写代码-仅供参考#话不多说,直接上代码,苏宁易购手机app网站首页,仅供参考。
htm自适应适配移动端
08-23
在移动端进行HTML页面的自适应适配有多种方法可供选择。一种常见的方法是使用媒体查询来针对不同的屏幕尺寸和分辨率进行适配。媒体查询是一种CSS功能，它可以根据不同的媒体类型和特定的条件来应用不同的CSS样式。这样可以方便地调整页面布局和显示效果以适应不同的移动设备。 另外一种解决方案是使用JavaScript来计算并动态设置适配参数。这种方法可以通过基于设备屏幕的宽度和像素密度等信息来计算出合适的适配值，例如使用rem单位来实现自适应。rem是相对于根元素的字体大小的单位，通过动态设置根元素的字体大小，可以实现页面的自适应。 所以，对于HTML页面的自适应适配移动端，可以考虑使用媒体查询和JavaScript计算进行适配。使用媒体查询可以通过CSS样式来适应不同的屏幕尺寸和分辨率，而使用JavaScript可以动态计算并设置适配值，实现更灵活的适配效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [移动端自适应rem](https://blog.csdn.net/siyangyuyangzhu/article/details/101021759)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Bubble_Qi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值