I am new to css.
I wanted to know which is the best standard technique to keep the page intact even when the browser size changes, the page is zoomed in or is used for any other screen size. I have tried centering my layout using a container but it gets disturbed when the page zooms in (i know it will, but all what I want is that the elements don't go out of the screen and if possible stay in almost the same position).
So what is the best and easy standard technique in css to achieve the
Thanks for your help.
The newest, cutting-edge method is called responsive web design. It's a bit complicated, but it's looking like the way to develop for multiple screen sizes. It is especially useful for small websites.
Check out some examples here: http://mediaqueri.es/
And some more in-depth information here: http://www.alistapart.com/articles/responsive-web-design/
If you set a set size for your body element anytime the browser is re-sized nothing within the page will change.
So the CSS you want to add is as follows:
body {
width: 960px; //being the size screen you want to accommodate your site to
}
Also this may help you: Commonly used pixel sizes for webpages and their pros/cons .
Related
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
Normally when I am creating a responsive site, I do the normal thing of setting a viewport to the device width, and creating different layouts for different screen resolutions.
But I'm doing a few tweaks to an old site that has big chunky buttons, default font sizes and a simple layout, and actually it looks quite usable when viewed as a desktop-style fixed-width layout, even on small mobile devices.
Rather than specifying a viewport and completely rewriting all the css to make a series of mobile-friendly versions, I'd really like to just increase the main body element font size a little more for viewing on a screen that is physically small: for this particular layout, this would be very usable - if I could work out how to do it!
Is this what -webkit-text-size-adjust: is for? It seems like it should be an easy thing to tweak, but all my googling turns up full responsive design approaches, which are overkill for this particular small task.
A way to make it is to detect the screen width with javascript using the window.screen.width property, and then apply the styles that you want from there.
Here's an example using jquery, however the same can be achieved with native javascript if you don't want to use a library http://jsfiddle.net/UXV7Z/
You can apply as many filters in resolution as you need, just like you would using media queries
DONT use javascript for such a simple task to accomplish with modern CSS, just use:
font-size: calc(80px - 3vw);
and adjust the values accordingly. That will icrease the size on smaller devices and decrease it on wider devices, which makes sense for buttons and footers and what not, but if you want to decrease the size on smaller width screens for text like large titles that overflow just use:
font-size: calc(25px + 0.35vw);
Once again adjust the values to fit your needs. And see here to view the browser support for the CSS calc() function. All modern updated browsers support it
I am building a site for my friend, He specified a bug for me. He said,"When I Zoom in/out the browser, the Website layout “breaks apart” but it is working fine in 100% Browser Zoom."
Please let me know the Standard for web development for Browser Zooming
In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units
usually I don't consider zooming but if you want a good website that shows ok with different screen resolutions like in mobile browsers or tablet you'd better use responsive style sheets.
you do not need to write it by your own. you can use style sheets like twitter bootstrap which already supports responsive web pages
you can download it from here enter link description here
The webpage should be responsive enough like to work for "smaller screens" that is more or less how it will work for your CSS when they zoom in.
Make sure you have min-width or min-height set to your body or general container so, when it gets to this minimums it just stais as it looks.
For example, for the SO webpage, you have the div with id "content" inside the general div.container that has a width of 980px, so if you zoom in a lot it just shows the bottom scrollbar.
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
Can somebody please tell me the best way to deal with different window sizes and with a user resizing the window when creating a webpage.
Because I always find myself creating layouts with html, css, etc. and at first everything look perfect. But as soon as I increase or decrease the size of the browser window everything falls apart.
Also it would be great if anybody could point me to some sort of guide or anything similar.
Thanks it advance! Any help is greatly appreciated!
For detection, you may want to use css media queries (in which case you may want to to use https://github.com/scottjehl/Respond Respond.js's shim for older browsers, to add fuller cross browser support), and target certain screen widths. http://html5boilerplate.com and it's default css: http://html5boilerplate.com/css/style.css has a great default css set for exactly that type of media query.
Another approach is to give a fixed minimum and maximum widths to the outer container of the page. For example:
body{text-align:center;}
#outer-container{text-align:left;margin:0 auto 0; width:98%;max-width:900px;min-width:760px;}
that way you can grow and shrink it and see how it looks within a certain range and know that other viewing windows are going to see that plus a horizontal scroll bar at worst for small viewing.
In general, just using the html5boilerplate as a starting base is a great approach, it's an excellent piece of work.