From the current point of view, the screen adaptation of the web runs through the entire front-end industry, such as common PC, mobile, responsive, and small programs.
PC edge
Features
The PC screen has the following characteristics:
- The screen size is generally larger than
13.3英寸 - Users will often drag and drop the size of the browser
reason
It is precisely because the size of the browser on the PC side will be changed frequently, and the scope of change is still large, the user will have a full-screen browser, and the user will also shrink the browser to a small value, such as around 600px. Therefore, if you use a flow layout (percentage layout) on the PC side, it will cause the page to be ugly.
solve
Therefore, on the PC side, this situation can only be solved by the layout of the version center .
- When the screen is larger than the width of the center, the center is displayed in the center
- When the screen is smaller than the width of the page center, a horizontal scroll bar appears on the screen, which is used by almost all PC-side websites.
case
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>版心布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
background-color: #ccc;
}
main{
width: 1200px;
height: 100%;
margin: 0 auto;
font-size: 40px;
background-color: pink;
}
header{
height: 80px;
background-color: aqua;
}
</style>
</head>
<body>
<main>
<header>版心</header>
<section>内容</section>
</main>
</body>
</html>
复制代码
复制代码Effect
mobile
Features
The screen under the mobile terminal has the following characteristics:
- The screen is smaller than the PC side
- The browser is not on the PC side, and can be resized at any time
reason
Since the overall screen of the mobile terminal is smaller than that of the PC terminal, and the situation of dragging the browser to adjust the size cannot occur, the layout on the mobile terminal is the most fluid layout, and there are some small branches, such as fixed small version heart.
solve
Flow layout , also known as percentage layout, refers to the fact that the width of most of the containers and elements on the page is not fixed, it may be a percentage unit, or it may be a rem unit
case
code
Ordinary images and containers can be replaced by percentages or flex when writing units.
For some elements in the page, like font size, you can use Taobao flexibile + rem's solution
normal flow layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流式</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ccc;
}
ul {
list-style: none;
display: flex;
height: 100px;
}
li {
flex: 1;
border: 1px solid #000;
background-color: aqua;
}
</style>
</head>
<body>
<main>
<section>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</main>
</body>
</html>
复制代码
复制代码Effect
Taobao flexible + rem
It doesn't matter flexible and flex layout, it doesn't matter to wife and wife cake
This solution can be used with the above flow layout. The role of rem is mainly for fonts to change with screen changes.
-
rem css unit, relative length, its value is equal to the font size of the root tag such as
<style> html { font-size: 100px; } div { /* 相对于 100px */ font-size: 1rem; } </style> <div> rem单位 </div> 复制代码 复制代码Effect
-
Taobao flexible
- It is a js library developed by the hand Taoist team that handles rem settings on the mobile terminal
- Change the font size of the root label to one-tenth the size of the current screen
- The font size of the root tag has changed, and so have the elements or font sizes that use rem units
process
flexible代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>版心布局</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
<script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
</div>
<script>
window.onload = function () {
setFont();
window.addEventListener("resize", function () {
setFont();
})
function setFont() {
var div = document.querySelector("div");
div.style.fontSize = document.querySelector("html").style.fontSize;
div.innerHTML = "html的字体大小为" + document.querySelector("html").style.fontSize;
}
}
</script>
</body>
</html>
复制代码
复制代码flexible效果
综合flexible 和 rem
根据以上的特点
flexible把 根标签字体大小改为 屏幕的十分之一rem可以根据根标签的字体大小改变而发生改变
得出以下解决方案
-
假定设计稿的宽度 是
640px -
根标签的字体大小为
64px也就是1 rem = 64px=>1px=1/64rem -
原设计稿中的div大小为100px，字体大小为100px
-
将px单位修改为 rem单位
div{ width:100px; font-size:100px; } 修改为 div{ width:calc( 100rem / 64 ); font-size:calc( 100rem / 64 ); } 复制代码 复制代码 -
将设计稿的宽度也抽象出去
div{ width:calc( 100rem / 十分之一的设计稿宽度 ); font-size:calc( 100rem / 十分之一的设计稿宽度 ); } 复制代码 复制代码
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>版心布局</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
<script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: calc(100rem / 64);
height: calc(100rem / 64);
font-size: calc(100rem / 64);
background-color: aqua;
}
</style>
</head>
<body>
<div>
</div>
<script>
window.onload = function () {
setFont();
window.addEventListener("resize", function () {
setFont();
})
function setFont() {
var div = document.querySelector("div");
div.style.fontSize = document.querySelector("html").style.fontSize;
div.innerHTML = "html的字体大小为" + document.querySelector("html").style.fontSize;
}
}
</script>
</body>
</html>
复制代码
复制代码最终效果
小版心
小板心的做法其实也是流式布局中的一种，只不过对最外层容器加了一个最大宽度的设置如
main{
max-width:540px;
}
复制代码
复制代码参考
小程序端
小程序端可以理解特殊的移动端，只不过小程序端不存在 rem这个单位，取而代之的是 rpx 这个单位，翻译就是响应式像素，功能类似 rem
特点
小程序中不需要引入淘宝flexible这个库，因为内置的 rpx 单位就是实现了 rem + fleixible 功能。
小程序中，存在 屏幕的宽度 统一为 750 rpx 因此：存在以下关系。
| 屏幕宽度 | 换算关系 px 和 rpx |
|---|---|
| 750 px | 1 px = 1 rpx |
| 375 px | 1px = 2 rpx |
| any px | 1 px = any / 750 rpx |
代码
如 设计稿为 375px，其中存在一个view 宽度高度均为 100px ，字体大小 为 100px
view {
width: 200rpx;
height: 200rpx;
font-size: 200rpx;
background-color: aqua;
}
<view> 小程序rpx </view>
复制代码
复制代码vw 和 vh
在移动端中，还存在以下单位，也很好用，可以很方便解决问题。
| 单位 | 名称 |
|---|---|
| vw | 100vw 等于 视口的宽度 |
| vh | 100vh 等于 视口的高度 |
| vMax | vw 和 vh 中的较大的那个 |
| vMin | vw 和 vh 中的较小的那个 |
以上单位 在移动端中，或者在小程序中都支持。
The design draft is 375px, there is a size of 100px, and the divfont size is also 100px.
375px = 100 vwSo1 px = 100vw / 375- Therefore
100px = 100vw * 100 / 375;
code
Note that the syntax of calc is strict, especially the spaces
main {
background-color: pink;
width: calc(100vw * 100 / 375);
height: calc(100vw * 100 / 375);
font-size: calc(100vw * 100 / 375);
}
复制代码
复制代码Responsive layout
The concept of responsiveness is divided into two categories
- One is back-end responsive
- One is front-end responsive
Backend Responsive
User-AgentThe backend server determines whether the source request is a PC or mobile terminal according to the front-end browser , and then the server dynamically returns the PC-side page or the mobile-side page. This feature is easily present in nginx. JD.com, Tmall, and Taobao are also like this.
front-end responsive
Mainly refers to through media queries to achieve.
Write a set of code on the front end html + css + javascript, you can change the style of the page according to the width of the screen in winter
This practice experience is not the best, but it is the smallest code that is compatible with both PC and mobile. Generally, it is not required for pages or used by small businesses.
Since it is also compatible with the PC side, generally do not use too advanced h5 css3 technology for responsive pages.
case
For example, a large screen displays 3 columns in the next row, and a small screen displays 2 columns in the next row.
<!DOCTYPE html>
<html lang="en">
<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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
overflow: hidden;
}
li {
float: left;
height: 100px;
border: 1px solid #000;
background-color: pink;
}
/* 大屏幕 */
@media screen and (min-width:800px) {
li {
width: 33.33%;
}
}
/* 小屏幕 */
@media screen and (max-width:800px) {
li {
width: 50%;
background-color: lawngreen;
}
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
复制代码
复制代码Effect
other
When the industry wants to implement responsive layout, Twitter's bootstrap framework is generally used, which is highly praised and compatible with ie8.