1、 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
2. Floating problem: If there is a box in the middle that is floating, you need to set the lower box as positioning, you can choose to set the distance from the bottom to make it downward (bottom: 0), then you need to give them the outer box. The largest box is set in the form of a child and a parent, and a shortcut is used to set a fixed height for the entire large box.
3. Video tag reference problem: try to use video tag as much as possible, ifarme and embed may have problems.
<video src="http://www.huizhangongsi.com/video/acme.mp4" width="320" height="200" controls class="test2"></video>
4. For left and right layout (left picture and right text), remember to use flex layout as much as possible:
Parent box:
display: flex;
justify-content: space-between;
Two subbox settings: flex: 4...
5. For mobile page images, the width and height should be in the form of percentages as much as possible.
6. The redundant fonts are not fully displayed:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
7. Set the logo to the center
.logo{
width:100%;
height: 120px;
background-color: #000;
position:relative;
}
.logo img{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
8. If you want the video playback display to be fully used (the aspect ratio of the video display needs to be calculated):
var vedioWidth = $(".test2").width();
$(".test2").css('height',vedioWidth*178/317.25);
9. The reason why the scroll bar appears when the page slides left and right is: the content of the page stretches the entire screen, and the width of the screen is not enough to accommodate the content, so there will be a problem of sliding, and the solution needs to be viewed on the Firefox browser. The element opens the box, and then resets it.
10. There will be compatibility issues on mobile pages, and you need to consider this issue before writing.