How can I implement a css-only custom layout on the Mobile End? For example, on a mobile page, I want to define a div with a width of 80% and a height equal to the width. It's okay to use JavaScript before, but I want to know, how to Use css. Thank you for your guidance. How can I implement a css-only custom layout on the Mobile End?
For example, on a mobile page, I want to define a p with a width of 80% and a height equal to the width. It's okay to use js before, but I want to know, how to Use css. Thank you for your guidance. Reply content:
p#target { width: 80vw; height: 80vw }
Add a pseudo element and use padding-top: 100% to open the container to realize the same width and height. Phone code word inconvenience paste code, specific can refer to my previous article: https://idiotwu.me/css-responsive-square/
I just made a supplement to the answer from Mr. He, and only provided the portal, seven cold portal units.
Http://www.admin10000.com/document/5463.html
Provide a general idea,
Is to use red p as an intermediary.
Demo> A Pen by Joy Youger
.{
Width: 80%;
Padding-top: 80%;
Height: 0%;
} This problem can be implemented by pure CSS on both PC and mobile terminals ..
That is, the method described by @ Dolphin Wood. I would like to add one more point: Use
Height + padding-topYou can get
Arbitrary
Aspect Ratio.
Responsive background images with fixed or fluid aspect ratios
This method is introduced in this article.
He said that, I have never used the new unit and checked the compatibility.
In addition, height and padding-top can be used to implement
Dynamic Aspect Ratio(Non-fixed Aspect Ratio) I don't understand what you said ~ What is js 80% in width? Do you mean js to get the page width and then use js to modify the css height value? Search for the responsive layout. Media query! Determine the browser width and set corresponding properties! Bootstrap recommends that you check the CSS source code.
