Home > Developer > Web Develop
order : Usually we can only control the width of the div and not control the height, in the response page if you want this div is a square then must use media queries at different resolutions to write the death of the height of today's whim to study a Use percentages to dynamically control the height of the div so that it is the same as the width of a square or even whatever you want to scale
One, background: most pictures or video list pages currently on the mobile display, listing a few
You can see that these pages have one thing in common. Two-column list of the same height of a single module I'm acting 劜 their source is to say the picture is set to a fixed height and then the Li open Li width is set to 50% and then floatleft the media query to respond
Second exploration
So I was thinking how to set the Li's width is not controlled by the picture, but there is a problem we can only use a percentage to set the width height or to write dead it still doesn't make sense or to use the media query to write a lot of code
So I came up with a getcomputedstyle. This property he calculates the style of an element on the page by post-calculation so that we can set the width first, such as 50%, and then get the width by getComputedStyle and assign it to the height of the element.
This becomes a square. Down to the actual combat.
Three combat
Our goal is to double-column center display square and follow the resolution size or browser size than zoom
1. Set up an HTML frame
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1, User-scalable=no, Minimal-ui" /> <Metacontent= "Yes"name= "Apple-mobile-web-app-capable"/> <Metacontent= "BLACK"name= "Apple-mobile-web-app-status-bar-style"/> <Metaname= "Format-detection"content= "Telphone=no"/> <Linkrel= "stylesheet"href= "Css/style.css"> <title>HTML5 getComputedStyle + resize for dynamic wide-height and responsive page design</title></Head><Body><Divclass= "Test"> <ul> <Li></Li> <Li></Li> <Li></Li> <Li></Li> <Li></Li> <Li></Li> <Li></Li> <Li></Li> <Li></Li> <Li></Li> </ul></Div>
<scirpt src= "Js/zepto.js" ></script>
</Body></HTML>
2. css
*{margin:0; padding:0;}. test{width:100%;} ul{width:96%; margin:auto;} ul:after{content: "."; visibility:hidden; height:0; clear:both; display:block;} UL li{width:49%; margin-top:10px; Background:rgb (230,34,57); List-style:none;} UL Li:nth-child (even) {float:left;} UL Li:nth-child (odd) {float:right;}CSS let Li's odd left floating even right float to the center of the effect so that you can not use margin because margin may not be allowed to divide the best way is flex but we're only thinking about double columns, so don't flex.
3.js
First, we're going to write a function that gets the computed style.
functionGetcomstyle (Elem, style) {varnode = document.getElementsByTagName (Elem) [0]; varThestyle; if(window.getComputedStyle) {//If window has getcomputedstyle this property varStyleobj = window.getComputedStyle (node,NULL);//The second argument is to get the style setting of the pseudo-element null is not to get Styleobj is an object containing various style attributesThestyle = Styleobj.getpropertyvalue (style);//GetPropertyValue Gets the attribute value specified by the element CSS}Else{//IEThestyle =Node.currentstyle; } returnThestyle;}
Here are the two parameters that represent the style element you want to get style elements for example, we want to get the width at the moment.
Next we write the main function settings
$ (function() { var width = getcomstyle ("Li", "width"); $ (". Test ul li"). Height (width); })Effect Perfect we didn't set the height of Li but now he's got a height. Li became a square.
But there was a problem when I changed the width of the browser, his height didn't respond.
It's not what I want. Because when the width of the browser changes, there must be a change in the listener to make the response, so I think of resize. This function is triggered when window windows change
$ (window). Resize (function() { var width = getcomstyle ("Li", "width"); $ (". Test ul li"). Height (width);})This is good. When the width of the browser changes, we can still get the width and assign a value to the height
Four divergence
Now that we can make him a square, we can make him a rectangle or whatever we want. So let's write a function that can control the height.
function Controlh (width,n,ele) { neww=parseint (width.replace ("px", "")); var height=neww*N; $ (ele). Height (height);}These three parameters are to get the width of the element, to set a multiple of the width of the height, the element
The Complete JS
vari = 0;//Main function$(function() { varwidth = getcomstyle ("Li", "width"); $(". Test ul Li"). Height (width); Controlh (width,0.8, "Li"); })//trigger when window changes$ (window). Resize (function() { varwidth = getcomstyle ("Li", "width"); I++Controlh (width,0.8, "Li"); Console.log (i); })//Get element width functionGetcomstyle (Elem, style) {varnode = document.getElementsByTagName (Elem) [0]; varThestyle; if(window.getComputedStyle) {varStyleobj = window.getComputedStyle (node,NULL); Thestyle=Styleobj.getpropertyvalue (style); } Else{//IEThestyle =Node.currentstyle; } returnThestyle;}//Set Element Height functionControlh (width, n, ele) {neww= parseint (Width.replace ("px", "" ")); varHeight = neww *N; $ (ele). Height (height); }
Controlh (width, 0.8, "Li") in the case of the page display
Controlh (width, 1, "Li") page display
Controlh (width, 1.5, "Li") page display
HTML5 getComputedStyle + resize for dynamic wide-height and responsive page design
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
