Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm making a site and I'm making it responsive, i would like to know if it's better to use breakpoints at real devices size as in this image or setting breakpoints on each "breakpoint" in which the design doesn't work.
breakpoints at real screen sizes are unpractical as its nearly impossible to cover all sizes/ devices.. also you have to keep in mind that the browser size is not necessarily the actual screen size.. i would just set the breakpoints to make the design work.
You could have 4 to 5 breakpoints. The ones that I usually use and work well are for:
Extra small devices(Phones) (<768px)
Small devices(Tablets) (≥768px)
Medium devices(Desktops) (≥992px)
Large devices(Desktops) (≥1200px)
Since real device sizes vary, it's nearly impossible to cover all devices.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I am pretty new to front-end development. I wonder what are the disadvantages of vh and vw? I have been always using them because they can adjust the font size based on the screen size. However, I didn't see many people use them as much as I do and saw online that most people prefer to use em. So, it is okay to keep always using vh and vw? What are their disadvantages?
Thank you very much!
The disadvantage is the same as the advantage: it is relative to the screen dimensions.
This is something you probably don't want for a font, since "absolute" units like px and cm already are relative to the perceived size*, which accounts for how distant the observer is from the screen. For example: If a user is using a mobile phone to navigate a web page, you would want the font size to remain constant whether it has a big screen or a small screen.
So I would recommend using an absolute unit like px to set the font size, border thicknesses, etc...
* According to the spec. In practice, the size of px is often synchronized with the OS settings.
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 4 years ago.
Improve this question
Its been a while since the difference between PCs and Smartphones screens resolution becomes quite close. So i think distinguishing between the 2 using
#media max-width isn't quiet precise.
Am i wrong or is there any other way to do it better?
Edit:
After i asked the question, I got an idea, i thought using the centimeters(cm) unit instead of pixels is the easiest way to distinguish between a small and big screens. but unfortunately the metric system isn't well supported it seems, it works flawlessly with my PC, but my mobile phone think that his width is more than 10cm even 20cm long.
I'm currently using #media orientation to distinguish between PC and Tablet&Mobile. my main concern is the mobile as it's width is so small on portrait orientation for wasting space on page margins, so this is enough for me now.
Remember you can use multiple tests in one query as well as AND/NOT/OR functionality in media queries
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {}
I've found testing for pixel-ratio > 1 and/or resolution (dpi) combined with device width useful in catching a lot of mobile devices.
It seems there is no best practice currently and it is recommended to use multiple tricks to detect whether or not the user is using a mobile browser.
Heres a similar question with recommended tricks
Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm adding a tile to the body tag as a background-image (for noise texture). As far as performance goes, does it matter whether that tile is 50x50, 200x200, etc.?
There doesn't appear to be any recent information regarding this. I found a few similar questions that haven't been updated in years and wasn't sure if browsers have changed the way they handle this.
Short answer: No.
The image only needs to be downloaded once. Instead, worry about how it displays to a user based on the size you choose. Watch out for any pixelation with too big of tile sizes.
This really doesn't matter but can be debated depending on the actual file size of the image . Otherwise of course setting the pixel size to 50x50 depending on the original size of the tile would look smaller but cleaner than 200x200 . At the end of the day I would prefer you to judge mainly on how it looks in this case .
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am new to responsive web designing and CSS3 media queries. I am designing a website that will be accessed through browser on all kind of devices like cell phones, tabs, desktop.
I am using CSS3 media queries and in the process of creating css for my website. I want the font-size, the width of the div should vary as per device's screen width
How many screen sizes should be handled typically if I want my website to look fine on all type of devices. Is there a standard for it?
Please advise.
While you resize your browser window, it should simply look good on every possible size (resize your browser window and make sure you drag it through all the sizes for yourself: smallest to largest for your monitor.)
Then test this as well for different browsers.
You can find a handy tool for this on www.quirktools.com/screenfly.
But remember it's a tool. It should look good on all sizes. No matter how you drag it.
Well, there are a lot of free responsive templates on the web that already do that, but if you want to build your own design from scratch, you should start with a full version of your site for desktop browsers, then add css styles for most common devices/sizes.
Keep in mind that there are a lot of different resolutions a tablet or smartphone could have. 1080p, 720p, 800x600 etc. and a lot in-between.
Just do a quick search for a reference of responsive design device resolution.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
In this page here, Compass gives allowance for 4 different types of layouts for sprites - vertical, horizontal, diagonal and smart.
It mentions that the smart layout is the most efficient use of space for a layout, which is very plain to see.
However, Compass defaults to using the vertical layout on Sprites! Why? And why even offer up different types of layouts? Is there any practical reason?
One difference is the generated file size.
Depending on the images that are combined to a sprite, it is advantageous to select the option which fits best the image space without much whitespace. This will result in a smaller image size than using one of the other options.
This may lead to use smart option most of the time. Google uses sprites of that style, too.
The smart sprites are most probably more cpu intensive to generate than simple horizontal or vertical sprites. I do not know if there are other reasons for selecting horizontal/vertical sprites over smart sprites.