What is pixel perfect design? is it not responsive? i saw many tutorials on youtube ( figma to html css) and all of them are using the same css which is defined in figma for each components. like 283px and 90px width for a box. My question is how can i make this responsive if it is fixed in pixels? if i make 3 layouts of design ( mobile ,tab, desktop) then it works properly on these specific resolutions but don't work properly between those 3 (mobile,tab,desktop) resolution. If i use rem, it doesn't work responsive. I want to learn how to code Figma/xd/psd to HTML CSS.
Responsive Design is a topic in of itself and you seem to have little prior knowledge about it. There are many web frameworks and practices that help you create responsive designs. Without an example of what exactly you are trying to achieve it is hard to help you. Let me try anyway:
You are correct about absolute units not changing upon device-size. The best ways to have responsive code straight out of Figma is to make a lot of use of its constraints. You can set sizes to scale with the parent, keep left and right margins, use auto layouts (translates to flexbox css) and so on...
In general css provides you some relative units like %, em, rem, vw and vh: https://fullscale.io/blog/best-css-unit-for-responsive-web-design/
rem is relative to the root- element's font-size.
em is relative to the parent element's font-size.
% is simply the percentage of the parent element's width.
vw and vh are the percentage of the viewport's width and height.
I'd also suggest you look up #media breakpoints which are a way to apply css styles to different device sizes: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
Related
Which is the better way to create a responsive website among grid, media queries, and HTML tables.
often neglected by developers when it comes to responsive websites: Typography.
Typography!
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width:960px) { body {font-size:1.2rem;} }
#media (min-width:1100px) { body {font-size:1.5rem;} }
There are lots of ways to create a responsive behavior in css, you gave some good examples for them.
Personally, I'm using the Flexbox and Grid display methods to align html containers and contents, and by using Media Queries i can make them interact responsively for any device.
For example, if you wanna render a cards-based container, meaning there will be multiple div elements with their own contents, aligned in a straight line, i would use the flex-wrap property to break them instead of overflowing to one of the page sides. If the cards are getting small enough for the page, i'd use the vw value for my card's width at a certain page width, using media queries.
Of course you can have your own preferences for different responsive methods, and there are a lot you can search on the internet, i just gave some of my own.
Use media queries and flex,
Some example breakpoints,
// Extra large devices (large desktops, 1200px and down)
#media (max-width: 1200px) { ... }
// Large devices (desktops, 992px and down)
#media (max-width: 992px) { ... }
// Medium devices (tablets, 768px and down)
#media (max-width: 768px) { ... }
// Small devices (landscape phones, 576px and down)
#media (max-width: 576px) { ... }
My main smartphone is a Galaxy S8 Plus.
The media queries for this device are:
#media only screen and (min-width: 360px) and (orientation: portrait)
Let's start with the portrait orientation. This one, I'm understanding 100%, but here comes the problem.
This is the media query for landscape:
#media only screen and (min-width: 740px) and (orientation: landscape)
Everytime I code in this media query it applies to my desktop which has a 1920 * 1200 resolution. I know it's influenced by the min-width: 740px.
Now, my question is are:
How do I tackle this problem?
Can I create a single query that covers both portrait and landscape?
If so , what are the best practices for units in responsive web design? Right now I'm using vh and vw in my project, but I think it creates a mess sometimes.
And one last question: how do I cover most devices out there with a minimal use of queries?
Good CSS is minimal. Test my approach:
Global styles on top. For example font colors, font weights, backgrounds etc.
Then, use media queries:
#media screen and (max-width:1200px){
}
#media screen and (max-width:992px){
}
#media screen and (max-width:640px){
}
and so on... Higher widths are on top. In "mobile-first" approach, use min-width, and then lower widths are on top.
Try to avoid orientation property. Use this property only when you really need it.
vw and vh are convenient but remember that they are not supported on older browsers.
Bootstrap is good framework but you should learn how to make logic CSS from the scratch first. Keep up the good work.
To deal with the problem that it applies to desktop change min to max, there is a "standard" for what the media queries should be seen here, your media query described the medium size of < 768px for horizontal and very small size of < 576px
You don't need to include the orientation, you can simply write #media only screen and (min-width: 740px) then you apply for both, but you should have two media queries to make sure you cover both
vh and vw work best for creating responsive design, however if you are coding for IE then it might a problem, and you will need to find an alternativ to calculating height
Use Boostrap, it does everything for you almost
I'm starting to learn how to make a 'Responsive web page' and have so far just used the width of the window the web page is displayed in to change the layout. I'm wondering if there's a way to detect the scale of the monitor it's displayed in (if it's 4:3, standard 16:9, 21:9, etc) to change the layout since 1440p (2560x1440) and Ultrawide 1080p (2560x1080) shares the same pixel width.
Try setting width and height in one media query, separated with the word "and":
#media (min-height: 500px) and (min-width: 580px) {
/* CSS stuff */
}
With such media query you can target different proportions of the screen - even while having same widths.
Easy. To do it in CSS, combine two media queries with the word and:
#media screen and (min-width: 1336px) and (min-height: 768px) {
/* Your code */
}
To do it in javascript, just divide screen.width by screen.heightto get the aspect ratio:
var aspectratio = screen.width / screen.height
All,
I am trying to develop a responsive site, but for some reason the media query I use for the ipad/tablet is also effecting the iphone/mobile. Are my dimensions wrong?
What is the best way to target all three device types?
Thanks
/desktop/
#media (min-width:1100px)
/ipad/
#media screen and (max-width: 1115px)
/iphone/
#media screen and (max-width: 767px)
This is a common problem in responsive design and there are many approaches that try to solve it. I myself find a 4-breakpoint layout to be the most fitting for most of the situations.
Phone: default
Phone-Landscape: min-width 480px;
Tablet: min-width 768px
Tablet-Landscape: min-width 1024px
Desktop: min-width 1260px
Think of min-width as meaning greater than or equal to and think of max-width as meaning less than or equal to.
By that logic your iPad rules (less than or equal than 1115px) are also going to affect the iPhone since it's screen is less than 1115px.
It sounds like you want to use an AND on your ipad rule to make it only affect rules that are bigger than your iphone rule set. Something like:
#media screen and (max-width: 1115px) and (min-width: 768px)
See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries for more information
When i read about responsive design, people always seam to use this statement:
#media screen and(max-width: )
But mobile phones today seem to have really great resolution (often more than pc), whats the best way to detect small devices?
Thx ;=)
The screen resolution does not matter. The value used in media queries is the device width. For example:
My phone has a screen with a resolution of 1280x720 pixels. When held upright (in portrait mode) the width is 720px, but since it is an HD screen, it has a 200% ratio, and the resulting device width is 360px. This is the value used in media queries:
/* Even though my phone has a screen width of 720px… */
#media screen and (max-width: 360px) {
/*
* This code will apply
*/
}
#media screen and (min-width: 361px) {
/*
* This code will not apply
*/
}
The general rule is that phones in portrait mode have a device width less or equal to 400px, regardless of how many actual pixels their screen contains.
You can't directly query physical size.
You can, however, perform a media-type query for DPI along with Height and Width.
Example
#media(resolution: 326dpi) and (device-width: 640) and (device-height: 1136) {
// Iphone 5s
}
This should be a good starting point: List of displays by pixel density
Physical pixels and CSS pixels are not the the same on retina/HD mobile displays.
Research the viewport meta tag for information on device-width. i.e. <meta name="viewport" content="width=device-width"> is the CSS pixel width scaled at 100%.
See Viewport Device-Widths for a list of common mobile screen sizes.
When you are doing responsive design, you don't actually "detect" the screen size, rather you "target" various size using CSS Media Queries.
If you are using a library like Modernizer for example, that's when you are actually doing detection for various properties.