<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no" />
<title>仿阿里</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
font-family: sans-serif;
font-size: 20px;
background: #ccc;
overflow: hidden;
}
img {
width: 100%;
}
li {
list-style: none;
}
body {
overflow: hidden;
font:15px/1.5 DroidSansFallback,Arial,sans-serif;
}
#content {
position: relative;
width: 16rem;
margin: 0 auto;
}
#banner {
position: relative;
overflow: hidden;
width: 16rem;
height: 5rem;
}
#banner ul {
position: relative;
width: 16rem;
height: 5rem;
}
#banner ul li {
position: relative;
width: 16rem !important;
height: 5rem;
float: left;
}
#box {
margin: 0.5rem 0rem;
width: 16rem;
height: 7.45rem;
background: #fff;
}
.box-down,.box-up {
width: 16rem;
height: 3.4rem;
}
.up-content {
width: 4rem;
height: 3.4rem;
float: left;
}
.cont-img {
margin-top: 0.3rem;
margin-left: 1rem;
width: 2rem;
height: 2rem;
background: url(ali2.png);
background-size: contain;
}
.cont-name {
text-align: center;
font-size: 12px;
color: rgb(102, 102, 102);
margin-bottom: 0.2rem;
width: 4rem;
height: 0.9rem;
line-height: 0.9rem;
}
</style>
</head>
<body>
<div id="content">
<section id="banner">
<ul class="swipe-wrap">
<li>
<a href="#">
<img src="ali1.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="ali2.png"/>
</a>
</li>
<li>
<a href="#">
<img src="ali1.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="ali2.png"/>
</a>
</li>
</ul>
</section>
<section id="box">
<div class="box-up">
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">导航一</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">导航一</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">导航一</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">导航一</div>
</div>
</div>
<div class="box-down">
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">导航一</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">导航一</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">导航一</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">导航一</div>
</div>
</div>
</section>
</div>
<script type="text/javascript">
function init() {
var winw = document.body.clientWidth; //获取屏幕宽度 这里没做兼容
var html = document.getElementById("html"); // 获取html元素
var add = 0; //初始化一个变化值
add = (winw - 320)*0.0625; //经过测试宽度每增加1px，font-size的值就增加0.0625px
//用得到屏幕的宽度减去320 计算出 大于320多少宽度 最后得到font-size需要自动设置为多少
if (add > 13.75) {
add = 13.75;
}
//做个判断 由于最大的font-size为33.75px 所以这里我就直接用13.75来判断了
html.style.fontSize = 20 + add + 'px';
}
init();
window.onresize = changeWin; //当每次屏幕有变化的时候都要重新计算一次 比如横屏变为了竖屏 PC端动态变化宽度
function changeWin() {
init();
}
</script>
</body>
</html>
效果图：
相关推荐
【防阿里百变秀H5整站】是一个基于HTML5技术构建的网站模板，它旨在模仿阿里巴巴的"百变秀"功能，提供一种自适应的网页设计，可以在各种设备上流畅展示，包括桌面电脑、平板电脑和手机。这个项目包含了完整的代码...
### 阿里云盘手机网页版H5+CSS3页面源码 #### 知识点解析 **一、HTML5（H5）基础** HTML5 是 Web 的核心语言 HTML 的最新版本，它引入了许多新的功能，使得网页更加互动、多媒体化。在本项目中，我们主要关注以下...
这个方案适用于需要精细适配不同屏幕尺寸和像素密度的移动应用或H5页面，尤其是对于设计要求较高的项目，如电商、阅读类应用等。 （三）注意事项与局限性 尽管阿里高清方案在很多场景下表现出色，但也有需要注意的...
阿里巴巴技术专家羽瑶在探讨“基于图像智能算法的端上h5页面测试提效轻量化解决方案”时，详细介绍了为了解决淘系大促等活动中遇到的测试效率和成本问题，利用图像AI算法进行端上h5页面测试的创新实践。 一、背景 ...
该方案基于vw/vh单位和媒体查询，以实现页面的自适应布局。vw（viewport width）和vh（viewport height）单位分别表示视口宽度和高度的百分比，使得开发者可以通过这些单位来创建响应式布局，从而自动适应不同尺寸的...
11. H5页面适配：掌握响应式设计、媒体查询和弹性布局是进行H5页面适配的关键。 12. 前端存储：sessionStorage、localStorage和cookie是Web存储解决方案，了解它们的使用场景和限制对前端开发很重要。 13. 正则...
lib-flexible.js是阿里巴巴淘宝团队开发的一个轻量级库，其目标是让开发者可以轻松地创建适应各种手机屏幕尺寸的H5页面。这个库主要解决了移动浏览器的viewport（视口）问题，使得网页能够在不同的屏幕分辨率下保持...
这个模板基于Vue2，利用了lib-flexible和postcss-plugin-px2rem这两个关键工具，实现像素单位（px）到相对单位（rem）的自动化转换，从而达到页面元素在不同分辨率屏幕上的自适应布局。 lib-flexible是阿里巴巴团队...
首先，页面设计部分提到采用响应式设计，利用HTML5+CSS3编写，确保网站在不同设备如手机、PC、PAD上都能自适应显示，实现跨平台访问。首页的制作费用为3000元，包括PHP程序和MySQL数据库支持，以及前端H5+CSS3的设计...