Mobile CSS for adaptive positive circle (width and height with mobile phone screen width adaptive)
Last Update:2016-02-25
Source: Internet
Author: User
<span id="Label3"></p><p><p><strong>Preface</strong> : At the request of a friend asked to write a bit of mobile CSS to achieve adaptive positive circle (width and height with the mobile phone screen width adaptive), for later use</p></p><p><p>Less code:</p></p><pre><span style="color: #800000;"><span style="color: #800000;">. Adaptive-circle</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">50px Auto 0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">80%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Padding-top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">80%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border-radius</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">1px solid #000</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">box-sizing</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Border-box</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">//for. Layout {height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>; }<span style="color: #800000;"><span style="color: #800000;">position:relative; . Layout</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">position</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Absolute</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;"></span> left</span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Overflow</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Hidden</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">text-align</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Center</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">&.middle {&</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">before {display:inline-block</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">vertical-align</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Middle</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">content</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">"'</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Overflow</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Hidden</span></span>; }<span style="color: #800000;"><span style="color: #800000;">Div:first-child</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Display</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Inline-block</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">vertical-align</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Middle</span></span>; }<span style="color: #800000;"><span style="color: #800000;"> } }}</span></span></pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p>CSS Code:</p></p><pre><span style="color: #800000;"><span style="color: #800000;"><style>. adaptive-circle</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">50px Auto 0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">80%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Padding-top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">80%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border-radius</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">1px solid #000</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">box-sizing</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Border-box</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">position</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">relative</span></span>; }<span style="color: #800000;"><span style="color: #800000;">. Adaptive-circle. Layout</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">position</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Absolute</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;"></span> left</span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Overflow</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Hidden</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">text-align</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Center</span></span>; }<span style="color: #800000;"><span style="color: #800000;">. Adaptive-circle. Layout.middle:before</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Display</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Inline-block</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">vertical-align</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Middle</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">content</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">"'</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Overflow</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Hidden</span></span>; }<span style="color: #800000;"><span style="color: #800000;">. Adaptive-circle. Layout.middle div:first-child</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Display</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Inline-block</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">vertical-align</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Middle</span></span>; }<span style="color: #800000;"><span style="color: #800000;"></style></span></span></pre><p><p>HTML code:</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "adaptive-circle"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "layout middle"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">H2</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Adaptive title<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">H2</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Adaptive End<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p>Full Demo Code:</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><!</span></span><span style="color: #ff00ff;"><span style="color: #ff00ff;">DOCTYPE HTML</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">HTML</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Lang</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "en"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Head</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Meta</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">CharSet</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "UTF-8"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Meta</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "viewport"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">content</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">title</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Mobile CSS Implementation Adaptive positive circle (width and height with mobile phone screen width adaptive) Blog Park (Yang Junhua)<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">title</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Head</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">. Adaptive-circle</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">margin</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">50px Auto 0</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">width</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">80%</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Height</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">0</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Padding-top</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">80%</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Border-radius</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">100%</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Border</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">1px solid #000</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">box-sizing</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Border-box</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">position</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">relative</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span> <span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">. Adaptive-circle. Layout</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">position</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Absolute</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;"></span> left</span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">0</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Top</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">0</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">width</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">100%</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Height</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">100%</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Overflow</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Hidden</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">text-align</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Center</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span> <span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">. Adaptive-circle. Layout.middle:before</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Display</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Inline-block</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">vertical-align</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Middle</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">content</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">"'</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Height</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">100%</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">width</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">0</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Overflow</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Hidden</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span> <span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">. Adaptive-circle. Layout.middle div:first-child</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Display</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Inline-block</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">vertical-align</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Middle</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span> <span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "adaptive-circle"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "layout middle"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">H2</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Adaptive title<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">H2</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>self-adapting Introduction<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">HTML</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p>Sample Link: Http://jsbin.com/wazovezima/edit?html,output</p></p><p><p>Example Diagram:</p></p><p><p></p></p><p><p></p></p><p><p>PS: reprint please indicate the source, Blog Park (Yang Junhua)</p></p><p><p>Mobile CSS for adaptive positive circle (width and height with mobile phone screen width adaptive)</p></p></span>
