In this scenario web page container always takes 90% width from browser width. As I discuss in the beginning of the tutorial it is always better to use percentages for widths, cause the the web page is more flexible for what ever the resolution that it’s works on. Then I set the width for main wrapper the div which I wraps all the page elements. webkit-box-ordinal-group : 2 /* iOS 6-, Safari, Opera*/ -moz-box-ordinal-group : 2 /* Firefox*/ -ms-flex-order : 2 /* IE 10 */ -webkit-order : 2 /* Chrome */ flex-order : 2 įirst I removed the browser’s default page margin and padding. webkit-box-ordinal-group : 1 /* iOS 6-, Safari, Opera*/ -moz-box-ordinal-group : 1 /* Firefox*/ -ms-flex-order : 1 /* IE 10 */ -webkit-order : 1 /* Chrome */ flex-order : 1 Here I am not going to do any explanation with basic CSS properties, but I’ll concentrate more on tutorial specific properties.įirst things first, lets set the layout of the web page.ĭisplay : -moz-box /* Firefox*/ display : -webkit-box /* Chrome */ display : -ms-flexbox /* IE 10 */ display : flexbox So where does the Magic happens, it is all with CSS. In tag there are two elements that holds an image and some text. Inside tag I declared an which specifies independent, self-contained content. Here I use tag to include all the page content, such like posts, descriptions and tag to hold Advertisements. tag defines sections in a web page and tag defines contents aside from the main content. I declared this to give a clear separation from Header tag and Footer tag.Ĭontent div includes two main elements, one is tag and tag. Then I declared a div that wraps all the content of the web page. Then Header tag that includes the web site Heading, next the Nav tag that includes navigation links which I kept blank cause I don’t have any page navigating. Rest of the tags are pretty normal where I wrap all the elements from Container div tag. In a forum I saw that there are waiting for a new release of script. Making media queries compatible with IE 8 or later didn't work with css3-mediaqueries.js script. Then again I use another conditional comment for IEMobile browsers.īut here I need to say that. Here I have used many media conditions,įirst for Iphones screen and (max-device-width: 480px) next for Android Devices screen and (-webkit-min-device-pixel-ratio: 2) next for Iphones with retina display screen and (-webkit-device-pixel-ratio:1.5) 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. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |