front-end layout
1. Adaptive
Self-adaptation is a set of codes. No matter how the screen size changes, only the size of the elements on the page changes. There will be no change from three columns to two columns in the table. It is responsive, and I am so annoying that every time the leader and designer come over to let I modified a page and said it was a change in the adaptive window, but the result required three columns to be changed to two. Why hide this button and that button to change the appearance, how to change it, you don’t need to design a picture, I’m just fantasizing, it’s annoying up...
Responsive website: m.ctrip.com/html5/
method:
- Use flex layout
- use percentage
- Avoid writing dead width and height
- add scroll bar
- use rem
- ...
2. Responsive
It is a set of codes for mobile phones, pads, and pcs. Each time a different style is loaded, they are all compatible in one project. This is called responsive. I hope that everyone who makes products can keep their eyes open. I don’t want to do design work, and finally say that it doesn’t look good. I don’t do design nonsense.
Responsive website: www.microsoft.com/zh-cn/
3. The common width and height of the mobile terminal
| Width Height | Proportion |
|---|---|
| 320×480 | (2:3) |
| 480×854 | (John 9:16) |
| 480×800 | (3:5) |
| 480×640 | (3:4) |
| 540×960 | (9:16) |
| 600×1200 | (1:2) |
| 600×1024 | (75:128 about 9:16) |
| 640×960 | (2:3) |
| 640×1136 | (40:71 about 9:16) |
| 720×1280 | (9:16) |
| 768×1024 | (3:4) |
| 800×480 | (5:3) |
| 800×1280 | (5:8) |
| 1080×1920 | (9:16) |
| 1536×2048 | (4:3) |
| 1600×2560 | (5:8) |
Common aspect ratios for vertical screens: 1:2, 2:3, 3:4, 3:5, 5:8, 9:16
Common aspect ratios for landscape screens: 4:3, 5:3
Attachment: List of smartphone screen sizes and resolutions
| Dimensions (inches) | resolution | pixel density |
|---|---|---|
| 3.5 (Apple iphone4) | 960×640(DVGA) | 326ppi |
| 3.7 | 800×480(WVGA) | 252ppi |
| 3.7 | 800×480(WVGA) | 252ppi |
| 3.7 | 960×540(qHD) | 298ppi |
| 4.0 | 800×480(WVGA) | 233ppi |
| 4.0 | 854×480(WVGA) | 245PPI |
| 4.0 | 960×540(qHD) | 275ppi |
| 4.0 (Apple iphone5) | 1136×640(HD) | 330PPI |
| 4.2 | 960×540(qHD) | 262ppi |
| 4.3 | 800×480(WVGA) | 217ppi |
| 4.3 | 960×640(qHD) | 268PPI |
| 4.3 | 960×540(qHD) | 256PPI |
| 4.3 | 1280×720(HD) | 342PPI |
| 4.5 | 960×540(qHD) | 245PPI |
| 4.5 | 1280×720(HD) | 326PPI |
| 4.5 | 1920×1080(FHD) | 490PPI |
| 4.7 | 1280×720(HD) | 312PPI |
| 4.7 | 1280×720(HD) | 312PPI |
| 4.7 | 1280×720(HD) | 312PPI |
| 4.8 | 1280×720(HD) | 306PPI |
| 5.0 | 480×800(WVGA) | 186PPI |
| 5.0 | 1024×768(XGA) | 256PPI |
| 5.0 | 1280×720 | 294PPI |
| 5.0 | 1920×1080(FHD) | 441PPI |
| 5.3 | 1280×800(WXGA) | 285PPI |
| 5.3 | 960×540(qHD) | 207PPI |
| 6.0 | 854×480 | 163PPI |
| 6.0 | 1280×720 | 245PPI |
| 6.0 | 2560×1600 | 498ppi |
| 7.0 | 800×480(WVGA) | 128PPI |
| 7.0 | 1024×600 | 169PPI |
| 7.0 | 1280×800 | 216PPI |
| 9.7 | 1024×768(XGA) | 132ppi |
| 9.7 | 2048×1536 | 264PPI |
| 10 | 1200X600 | 170ppi |
| 10 | 2560×1600 | 299ppi |
1.百分比布局
窗口的hight和width改变的时候，通过给 height、width 、padding、border、margin等 属性都是依托父组件的宽高（margin 和 padding 都可以使用百分比值的形式，但有一点可能和通常的想法不同，就是 margin-top、margin-bottom、padding-top、padding-bottom的百分比值参照的不是容器的高度，而是父级容器的宽度）
-
子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。
-
子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父亲元素的 width，而与父元素的 height 无关。border-radius 为百分比，则是相对于自身的宽度
缺点：
计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位
2、媒体查询布局
通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。
响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
语法: @media mediatype and not only (media feature) { css-code; }
js
//也可以针对不同的媒体使用不同的stylesheets:
<link rel="stylesheet" media="mediatype and not only (media feature)" href"mystylesheet.css">
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">
<!--上面将浏览器宽度小于等于80px时，应用 styleA 。-->
css引用
@media screen and (max-device-width:960px){
body{background:red;}
}
参考文档：blog.csdn.net/caseywei/ar…
常用的响应断点阈值设定
| 括号后面是样式的缩写 |
|---|
| <576px （Extra small） |
| >=576px （Small --- sm） |
| >=769px （Medium --- md） |
| >=992px （Large --- lg） |
| >=1200px （X-Large --- xl） |
| >=1400px （XX-Large ---- xxl） |
@media 会结合删格系统一起来使用，实现真正意义上的响应式开发。
3.rem 响应式布局
rem通常用来适配移动端，按照视口将页面分成10份。
比如现在有 5 个同尺寸的屏幕 （750 640 480 375 320），所有屏幕整体宽分成 10rem 那我们就需要分别得到这几种不同屏幕下对应的 html 根元素的 font-size 大小了。
| 屏幕尺寸 | html中font-size 大小(1rem 大小) |
|---|---|
| 750px | 75px |
| 640px | 64px |
| 480px | 48px |
| 375px | 37.5px |
| 320px | 32px |
flexible.js 插件也可以解决
em and rem are similar, they both scale the page layout based on font-size, but em mostly depends on the size of the font-size of the direct parent, and will only find the nearest parent, not directly dependent on the overall html root tag
3. vw, vh responsive layout
Because 100vw = 100 view window width, 100vh = 100 view window height, then according to the design draft of 750, 100vw is 750. Then 1vw is 7.5px
| screen size | 1vw |
|---|---|
| 750px | 7.5px |
| 640px | 6.4px |
| 480px | 4.8px |
4. flex elastic layout
flex-direction , flex-wrap , justify-content , align-items , align-content 子元素：order , flex-grow , flex-shrink ,flex-basis , align-self
4. Holy Grail Layout and Double Flying Wing Layout
Double wing layout
The width of the left and right columns is constant, and the width of the middle column is adaptive according to the size of the browser window.
holy grail layout
Like the double-flying wing layout, the width of the left and right columns is constant, and the width of the middle column is adaptive according to the size of the browser window, but it is more complete.