Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to build this site: http://www.alsite.com.br/misskessi responsive... but i have some doubts about the responsive format.
I want to know what i need to do to images, links, texts...? i think this is with percentage, but how much?.. how i can see how much i need to resize to fit the resolution....
exemple:
on my resolution (1600 x 900) this works fine:
#wrap{
position:absolute;
left:50%;
top:50%;
margin-left:-495px;
margin-top:-359.5px;
width:990px;
height:719px;
background-color: rgba(247, 8, 8, 0.2);
}
but on 1024x768 resolution, appears scrollbars... so i need to responsive this...
but how?
can anyone help me?
I hope this time i answer on a question about responsive design the question will not get deleted ;)
There is a difference between responsive design and percentages.
If you want to go for percentages you have to to add them at every point. Currently you are having it centered on the screen but your width and height and margins are fixed (in the logical, not the css way). You would have to change them to percentual values too. To keep the image from getting to big you should check out the max-height / min-height properties (the same way for width, left etc.)
Furthermore that is not really responsive, to make you site responsive and adaptive to even very small browsers you should check out media queries (http://css-tricks.com/css-media-queries/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). These two sites helped me a lot, when i had to create a responsive website in the past weeks (http://wywy.tv/howimetyourmother).
With media queries you can modify your css classes if various conditions are fullfilled, most times the width of the screen, by putting this in your css-code for example:
#media (max-width: 755px) {
.content {
width: 100%;
}
.header {
margin: 0 auto;
}
...
}
You can extend this code quite much, maybe have a look at the css-files on my developed site to see what i did and how it affects the appearance.
Here are a few things to keep in mind when building responsive sites.
Use Media Queries to define important break points within your design. Some common break points are <320px, <480px, <768px, >768px and up.
Make your layout fluid. You can use a grid system if it helps - 960 Grid System, Gridset, Columnal, Golden GS, etc.
Images should be set at 100% with a max-width. Make use of break points as well - You can make your images change positioning in relation to your different break points. When working with mobile layouts, keep only the essential images and hide the useless (non-important) ones.
Make use of Max-width/height and Min-width/height. These are very helpful as it lets you define a "lowest and highest" width/height in a few little characters.
For mobile layouts make your columns 100% width - You basically will use one column that spans all the way down. The media query you will use for this is for anything <320px.
As I said above - Keep only the essential content. On your bigger layout (>768-1024+) you can use your fancy images, but under that make sure you think content first and fancy second. This is specially important for mobile layouts.
Keep your layout simple
Don't forget your viewport meta tag.
< meta name="viewport" content="width=device-width" >
You could make the image a background-image and use "background-size: cover;", which scales it to browser size.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am learning about responsive images and was wondering if I set, for example, an image with a width of 100px and height 100px, then, will that be smaller on a high-resolution screen? Is everything set in pixel (px) (font-size, width etc.) displayed differently on different resolution screens and do developers need to account for this?
there's a lot to this question. at its most basic, yes, if you set specific pixel dimensions to an element, then this will show up as the same number of pixels on different devices, but probably different physical dimensions due to varying pixel density.
in CSS (the language used to style web pages) there are other units such as %, em, and vw/vh/vmin/vmax which are relative to something, and these enable developers to lay elements out in a way that is much more flexible to changing screen sizes.
finally there are #media-query's which let developers provide different dimension depending on whether the screen is one size or another. for example, you may wish an element to take up the whole width of the screen on a small screen, but on a larger screen only take up a portion of the screen.
take a look at w3schools for more information, particularly css units and responsive design
Yes, webpages are being optimised for multiple devices. There are many techniques to be used and you should definitely keep learning them. This knowledge is not just essential for coder, but useful for graphic designers as well.
Very often you can see pages using CSS Media Queries or source srcset in the context of an img tag. One classic is for example to be seen at https://www.apple.com/ -> inspect the page source to see what is going on. There is plenty of good articles regarding the issue at sites such as #CSS Tricks.
PX is a set size. Meaning, an element's height on a computer will be the same height as on a tablet. It will not resize. Using %, em, vw, or the other ones, they are resizable and they will adjust depending on screen size. You can test by adjusting the window size when you run your program.
Read up on responsive web design
https://www.w3schools.com/html/html_responsive.asp..
You can have a single website design optimized for different devices using various configurations like setting the
viewport
This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
Using the width Property
Width:
<img src="answer.jpg" style="width:100%;"> - Setting the width property allows the image to be scaled up and down if need be.But one thing to note with width property is the image can be scaled up to be larger than its original size. So you can use max-width
Max Width:
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.
Responsive Text Size
You can use the "vw" unit which stands for viewport width which means the text will match the browser window.
Media Queries
You can always define completely different styles for different browser sizes.
#media (max-width:800px) {
.left, .main, .right {
width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
}
}
Frameworks
Alot of frameworks out there already have this done for you and to avoid doing it from scratch you can use them. One example is Semantic UI .
Most of these frameworks already follow best practices so it would be awesome to use them and also most of them are community driven.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am currently redoing my css and other stuff thats needed to make my adaptive site to a responsive - until now I designed my site for my laptop and then scaled down and now Im doing from the other side.
I have managed to get the site look ok in 319x480 and now Im gonna see where to make my first breakpoint: exactly how do you go about this? Should I only resize window horizontally and see where a break is needed or should I also do it vertically? From the tutorials Ive seen they always just talking about horizontally, but arent you missing some stuff then?
Also, now it looks good in portrait mode. Lets say I will make a breakpoint at 600px width for portrait and one at 1000px and thats it. Should I then after go back to 319x480 and flip to landscape and expand the site once again and find new breakpoints for landscape mode too?
How are you going about this in a methodical way? I think this is a really cool way to design and I really wanna learn how to do it right.
Thanks!
You want to use min-width media queries if you are doing mobile first. Desktop first uses max-width. Concentrate on width rather than vertical height like you were asking, if the browser window height is resized it is usually fine with the scrollbar. You don't want people to have to scroll horizontally usually.
Example:
.header-title {
font-size: 14px;
}
#media screen and (min-width: 600px) {
.header-title {
font-size: 16px;
}
}
#media screen and (min-width: 1024px) {
.header-title {
font-size: 18px;
}
}
All the main breakpoints you can check in browser console. Here you can see, that as a rule, only width changes. Probably, vertical resize won't influence your page that much
In general CSS break points are horizontally because responsive have a "flow" layout. For example, if you have a grid layout with 3 photos side by side and your browser gets too narrow display all of them, the should get stacked on top of one another so the view can scroll through them.
It's always a good idea to test your site at multiple sizes and aspect ratios, especially if you are using fixed/absolute position or calculating heights.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Every website has elements and their width and height must be set. here is my question how do we can set the width and height such that the website works correctly on different monitors with different width/height? is px preferred to %? when we should px and when we should use %? what are advantages and disadvantages of each one?
It all depends upon the type of your website and how you want to response to various screen resolutions.
Just using % and px is not enough, there are other unit for text size for example em and pt etc.
Also we have media queries
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
http://www.htmlgoodies.com/html5/client/common-techniques-in-responsive-web-design.html#fbid=YIeEpYZXBt-
Relevant SO Question Responsive Layout - PX, EM, or %?
Use px when you want to specify a fixed/static height in pixels. % refers to the percentage total of the elements parent. Using percent means the web site will adapt when the browser is resized wheras using pixels it will not.
Which one you choose really depends on the look and feel that you are trying to achieve.
it all depends of what kind of web you plannning to do.
Many web pages use a container with a fixed width on pixels (like 960px). then it's extremely easy if you have a well-made predesign on photoshop, illustrator, indesign, etc to work with pixels. These webs though doesn't work well outside PC screens as if you have a window width smaller than the container the content won't be show unless scrolling horizontally.
Now, if you want your content to adjust to any horizontal width you should use % but imo it is much difficult and you need a clear idea what you want to show on each possible width before starting working.
If you decide to go for a "responsive" design... the work will be harder. I recomend you to use something like:
#media screen and (min-width:600px) {}
#media screen and (min-width:800px) {}
#media screen and (min-width:1024px) {}
#media screen and (min-width:1524px) {}
in your CSS to tweek your classes wahtever necesary for each width (or platform). (there's also many other usefull #medias
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I want to know how to make a website, and all of its elements responsive to adapt to different screen sizes: fonts, images etc...
I have done something like this:
#media only screen
and (max-width : 320px)
{
//here put the width and height of all the elements in the site
}
I have to specify target resolution for each one. Can there be a common setting that can apply to all resolution?
Can there be other ways to make it dynamic for each screen size? Is there an easier way?
Adaptive layouts (Responsive layouts) consists of the following three factors:
1. Flexible Layouts:
The divs you use to create your web page layouts need to consist of relative length units.
This means you shouldn't use fixed widths in your CSS, rather use percentages.
The formula to convert sizes from a design to percentages is (target/context)x100 = result
Lets take the picture above as an example of a design. To calculate what the size of the div on the left is going to be calculated like this:
(300px/960px)x100 = 30.25%
The CSS would look something like this:
.leftDiv
{
width: 30.25%;
float: left;
}
.rightDiv
{
width: 65%;
float: left;
}
For text to automatically resize you can use a unit called VW (ViewWidth)
.myText
{
font-size: 1vw;
}
This ensures that the text automatically resize relative to the view width.
2.Flexible Media:
Flexible media applies to images, videos and canvasses which automatically resize relative to its parent.
Example:
img, video, canvass
{
max-width: 100%;
}
This ensures that these elements resize automatically inside its parent.
3. Media Queries:
The next step is to use media queries like you've done in your question, these media queries define certain CSS statements for certain screen sizes. I normally use only three media queries for computers screens, tablets and phone screens. Its not necessary to have more than this because the Flexible Layouts and Flexible Media will ensure relative resizing if done correctly.
You may find this helpful: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
There are two options I am aware of.
Use Adobe Reflow, which exactly what you have but the software writes it for you and you just click and drag your elements, so you will achieve the same result much faster.
Have absolutely everything a percentage, size, margins, borders, everything. This way you won't have to rewrite code over and over, a 'one size fits all' option.
Take a look at Bootstrap and more specifically the Grid System. It should help you with css for different screen sizes.
Incase if you are new to CSS adaptive layout please do have a look at the following websites:-
a) Bootstrap
b) Foundation
In my opinion Foundation, is a great place to start with.It has a very beautiful documentation about grids.Please do check it out
When i make websites, it fits on my screen, but when i open the website on another screen, it doesn't work correctly (The divs overlaps eachother). It's the same when i resize the window. I saw a couple of posts about this, but still, no good answer. I tried making a container to put them all in. But it's still the same.
Any answers, why this is happening?
Container CSS code:
#container
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
I put it into HTML like this:
<div id="container">
Content goes here
</div>
EDIT: Guys, i don't think you understand me. When i'm on another screen resolution, all the divs moves. I think everything moves, if i'm not completely wrong. I would like to know the real way of doing this. What do you do?
http://i49.tinypic.com/8wwo6r.jpg
http://i48.tinypic.com/359ydc9.jpg
FINAL EDIT: I fixed it with the percentage. It seems to work quite well! Thanks for all your answers! I know this will give me a kind of bad reputation, because i didn't make myself clear enough.
You can use percentages instead of pixel.
#container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
You can figure out percentages having screen resolution and the size you want using this forumla:
WidthPercentage = ContainerWidth / ScreenWidth * 100
So for your example if your screen resolution is 1360x768:
WidthPercentage = 960 / 1360 * 100 = 70.5%
This is called responsive design.
You can find some guidelines here and some good articles here.
If you don't want to use percentages, you can go with Responsive Design and Media Queries. Basically, you call different CSS rules based on different browser properties (for example: width). See a nice tutorial about this here (you can also see it in action).
Quote:
The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify
You've set your <div> (<div id="container">) to be 960 pixels wide. If you view the page in a browser window that's less than 960 pixels wide, then the <div> won't fit in it.
Your question isn't very clear. You've said "when i open the website on another screen, it doesn't work correctly", but you haven't said how it doesn't work. To get help, you need to describe the following three things with enough detail:
What you've done (e.g. what code you've written, what steps you're taking to run that code)
What results you expect from what you've done
What results you're actually getting