![]() ![]() Then in second I check whether browsing device is mobile device ( media="only screen and (max-device-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-device-pixel-ratio:1.5)"). In this statement I first check whether browsing device is a computer ( media="only screen"), if so I import styles specific to computer screens that adjust for screen resolution. ![]() Then I have used another conditional comment if browser is Not IE. Also I have imported css3-mediaqueries.js script since IE 8 or later does not support media queries. Then I have used conditional comments that if browser is Internet Explore use the mentioned script that defines HTML 5 tags, because some of old IE browsers cannot identify HTML5 tags. means HTML 5.Īnd then I declared an attribute which specifies the xml namespace for a document. In first line I have define the tags that says or instructs to the web browser about what version of HTML the page is written in. Those tags allow you to define better meaning to the browser which improves the search engine readability. Which is Header, Footer, Aside, Section tags. Adjustable WebSite Example using HTML5 CSS3 įor above HTML markup I have mostly used semantic HTML. The design layout for the above web site is But my ultimate goal is to show how use this.īrowser reduced so that Advertisement area is hidden.īrowser more reduced to make Image and Description align well. I found a solution for it but didn't work.Īctually the technique that I am going to use can use in many different ways, I have dome my demonstration coding which matches to my scenario. Also I tested it from two browsers Chrome, FireFox and IE, but in IE media queries doesn't work. In this case I demonstrate this with different devices (Iphone 5, Galaxy S4, Windows Phone 920 and ITab 2). So lets take a look at a effective way of make a web site screen size adjustable by using some great things in HTML and CSS. In above scenario web site decreases its web site only upto 1000px.
0 Comments
Leave a Reply. |