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
Related
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) {...}
I'm new when using media query, but I just found out when trying to develop a Desktop application (using electron but the CSS concept is still the same as normal web development) that there is a condition like this.
usually I'm using media screen like this (in this example I'm using 3 device as example: mobile, tablet, & desktop):
// default style for desktop
.my-default-css-code-is-here
// tablet
#media screen and (min-width: 768px) and (max-width: 1024px) {
.my-specific-css-code-for-tablet-is-here
}
// mobile
#media screen and (max-width: 767px) {
.my-specific-css-code-for-mobile-is-here
}
but my friend ask me like this:
"For this desktop application we want to have a layout like this: Normal Size (window-size): > 60% and when has a tablet size than at least the style will change if window around Tablet Size (window-size): <= 60% desktop resolution (Laptop or PC resolution such as HD, retina, etc. ) How can we achieve this?"
Since I'm usually using fixed size, I don't know if #media screen can achieve this. can someone help me about this problem? I'm quite confused myself about this. can I use Ratio like in this article ? or can I just apply it like this?
// Desktop
#media screen and (min-width: 60% from A full Resolution) and (max-width: 100% from A full Resolution) {
}
// Tablet
#media screen and (max-width: 59% from A full Resolution) {
}
or
// default css
.my-code-is-here {}
// Tablet
#media screen and (max-width: 59% from A full Resolution) {
.my-code-for-tablet-is-here {}
}
for more information, Let say if there is 2 type of laptop:
Laptop A :
Real resolution = 1368px, The it means 59% from real is 807px
Laptop B :
Real resolution = 2560px, The it means 59% from real is 1510px
if you want your media screen be dynamic. you can use npm package postcss-media-variables
this package allow you to use css variable in media query. you can set your css variable in javascript and use it in media query like :
:root {
--min-width: 1000px;
}
#media (min-width: var(--min-width)) {}
you can change your css variable --min-width in javascript
Although I'm not entirely sure to understand what you are trying to achieve, I can explain quickly about vw (width of the viewport) and vh (height of the viewport). These two values are relative to the current displayed viewport only and for that reason, will change if you are displaying the website on a desktop screen (lets say 1920px by 1080px) (vw by vh) compared to displaying the website on a tablet (much less for vw and vh).
Said another way, they don't depend on the device itself, whether it's a laptop or a mobile phone, but only on the actual active viewport (viewport = the browser windows size). More info here: https://www.w3schools.com/cssref/css_units.asp
From what I understand of your friend's request, you should/could still use fixed values for your media queries, customizing them to fit your website actual layout on each screen size.
I apologize if I sound vague/ abrupt.
The web page should be in tune with the browser size. I mean if the browser size is reduced/ shrunk, the full web page should also shrink and should be visible in the shrunk browser window. Is this possible ?
You will need to use media queries for a responsive layout in your css
Example:
#media screen and (max-width: 699px) and (min-width: 300px) {
<css template for 300 to 699 px width goes here>}
You can also use bootstrap (a responsive framework which has predefined classes for what you may need) for a faster implementation.
i want prevent show my website in small screens same as mobile or tablet...
and i want to show message in this screen that open my site in large screen
How can I do this?
Set width and height using media queries like this
#media screen and (max-width:360px) and (max-height:520px){
body{
display:none
}
}
pen is here with resizable window
Use media queries:
//the css inside this block will only be applied to devices with less than 800px width
#media (max-width: 800px) {
//add css here to show the message to open the webpage on a device with a larger screen
}
You can learn more about media queries here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
As you have tagged wordpress: You can add custom css where you can configure your themes.
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.