微网站-使用flexible.js实现移动端设备适配_html/css_WEB-ITnose
移动端web开发越来越火，同时移动端适配也是一个很让人头疼的事情，你不能让一个同样大小的元素在不同的设备上都显示一样大小。（iphone6和iphone4下大小肯定是应该不一样的，否则用户体验很差）
下面我将以750px的设计稿为例，分析如何制作一个适配多终端的页面。
首先来看最终的效果图：
iphone6下
pic1.png
iphone4下
pic2.png
你看不同设备上看起来都是和谐的，不同设备，元素的大小都不同。
你所希望的是不是这样的结果呢？这种效果是如何实现的呢？
别急，下面慢慢讲。
首先，我们得了解以下几个概念：
虽然上面列举了很多，但是不要被吓着，其实都很简单的，网上也有非常多的介绍，只要大致了解就可以了。
css像素
物理像素
devicePixelRatio
layout viewport
visual viewport
ideal viewport
2.了解我们使用的库flexible.js
手机淘宝从2014年中开始，全面推行flexible设计。什么叫flexible呢？其实flexible就是responsive的低端形态和基础。
手机淘宝用JS来动态写meta标签，手机淘宝的flexible方案是综合运用rem和px两种单位+js设置scale和html字体。我们可以在GitHub上找到这个项目，可以通过网上查阅资料了解更多。
3.了解一个sublime text插件，加快我们的开发速度 这个不是必须，也可以自己手动计算。大家可以在我之前写的一篇文章中，了解该插件如何安装使用，真的非常非常非常简单，重要的话说三遍~
4.下面就真正开始主题啦
我所做页面的设计稿是750px的，有图有真相。
pic3.png
你看我没有欺骗你吧~
以顶部为例，介绍如何制作，首先还是看设计稿
pic4.png
通过ps获得顶部的高度，在750设计稿上96px,所以我们要用96/(750/10)，得到对应的rem值。
.msg-header{
position: relative;
padding: 0 0.4rem;
height: 1.28rem; //96/(750/10)
line-height: 1.28rem;
font-size: 0.48rem;
text-align: center;
border: 0.026667rem solid #eaeaea;
}这样就实现了最终想要的结果，是不是很简单。5.最后来看一看我们写的html,css，以及最终生成的html
html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><script src="flexible.js"></script> <link rel="stylesheet" href="index.css"></head><body><section> <p class="msg-header clearfix"> <a href="javascript:void(0);" class="baseIcon iconBack fl"></a> <span>消息</span> <a href="javascript:void(0);" class="fr clear">清空全部</a> </p></section><section class="container msg-content"> <p> <p> <span class="baseIcon iconMsg"></span> </p> <p class="media-right msg-right"> <h3 class="clearfix title">平台公告 <span class="fr date">2015-10-11</span></h3> <p>2015冬款上新2015冬款上新2015冬款上新</p> </p> </p> <p> <p> <span class="baseIcon iconMsg"></span> </p> <p class="media-right msg-right"> <h3 class="clearfix title">平台公告 <span class="fr date">2015-10-11</span></h3> <p>2015冬款上新2015冬款上新2015冬款上新</p> </p> </p></section></body></html>
css
此处省略初始化的样式.
clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden}
.clearfix{*+height:1%;}
.fl{float: left;}.
fr{float: right;}.
baseIcon{
display: inline-block;
background: url(bgIcon.png);
background-size:6.666667rem 6.666667rem;}
.msg-header{
position: relative;
padding: 0 0.4rem;height: 1.28rem;
line-height: 1.28rem;
font-size: 0.48rem;
text-align: center;
border: 0.026667rem solid #eaeaea;}
.iconBack{
position: absolute;
top: 0.373333rem;
left:0.373333rem;
width: 0.346667rem;
height: 0.533333rem;
background-position: -1.493333rem -1.066667rem;}
.msg-header
.clear{position: absolute;
right: 0.266667rem;
font-size: 0.4rem;
color: #666;
text-decoration: none;}
.media-left,.media-right{
display: table-cell;
vertical-align: top;}
.media-right{width: 100%;border-bottom: 1px solid #eee;
}.iconMsg{width: 1.253333rem;height: 1.253333rem;
background-position: -2.293333rem 0;
}.media-left{padding: 0.266667rem;
}.msg-right{padding: 0.266667rem;
}.msg-right .title{font-size: 0.426667rem;color: #333;
}.msg-right .date{font-size: 0.293333rem;color: #999;
font-weight: normal;
}.msg-right .desc{margin-top: 0.133333rem;
font-size: 0.346667rem;color: #888;}页面生成的html，注意flexible帮我们的页面添加了几处修改
pic5.png
好的，微网站—使用flexible.js实现移动端设备适配就介绍到这里，大家可以尝试一下，用过方知其好处。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1659
14
1415
52
1309
25
1257
29
1231
24
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
HTML: The Structure, CSS: The Style, JavaScript: The Behavior
Apr 18, 2025 am 12:09 AM
The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML: Evolution and Trends in Web Design
Apr 17, 2025 am 12:12 AM
The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
The Future of HTML, CSS, and JavaScript: Web Development Trends
Apr 19, 2025 am 12:02 AM
The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
