Replies: 4 comments 6 replies
-
|
Are there any actual devices still in use that have widths from 0px-320px? |
Beta Was this translation helpful? Give feedback.
-
|
window mode on desktop browsers comes to mind. |
Beta Was this translation helpful? Give feedback.
-
|
As i know including lower breakpoints, such as 320px, in your responsive design can indeed enhance inclusivity by ensuring that your application is usable on a wide range of devices, including those with smaller screens. screen mirroring pubg mobile This is particularly important for ensuring a positive user experience on mobile devices, which are commonly used for web browsing. Tailwind CSS, like many other CSS frameworks, chooses default breakpoints based on what the framework's developers believe to be the most common screen sizes and device categories. However, these defaults can be adjusted to suit your project's needs. If you find that lower breakpoints are more suitable for your application, you can customize Tailwind CSS's breakpoints using the configuration file. Grouping related responsive styles can indeed make your codebase more organized and maintainable. While Tailwind CSS offers utility classes for responsive design, you can also create custom utility classes that encapsulate related responsive styles. Additionally, you can use CSS preprocessors like Sass or Less to define mixins or functions for grouping responsive styles. |
Beta Was this translation helpful? Give feedback.
-
|
ChatGPT responses aren't helpful |
Beta Was this translation helpful? Give feedback.
-
|
I'd agree that there really aught be a looking online today, I found the following data:
and the following for desktop:
https://yesviz.com/iphones.php:
this kinda adds some merit (from my perspective) of having a smaller breakpoint than 640 by default.... as pretty much every iphone's reported viewport is < 640w I'm sure those making these decisions did so with sound reasoninng.... and I'm missing something.... would someone mind helping me understand what it is I'm missing? I came to the conclusion that the guiding idea behind this might be
... which could lead one to the perspective that there's not much need for further delineation.... which isn't WRONG ... but I suspect it has the added negative effect of subtly conveying the concept to test starting at 640x ... ...(or maybe that's just how I, as an ignorant human, interpreted it)... I suspect that the main upside of adding a smaller ie |
Beta Was this translation helpful? Give feedback.
-
|
Hey! So I did all the same research as you here which actually increased my confidence in choosing 640px as the lowest breakpoint. You'll see in that table that aside from the iPhone 5 which was discontinued many years ago, all of the dimensions that appear are between 360px and 430px, which is only a 70px range. Adding a breakpoint like say Of course people can resize their browser to any size, so just basing things off of common mobile viewport sizes doesn't take everything into account. At the time we made these decisions originally though we had to be more mindful of file size with Tailwind than we do now that everything is generated on demand. Still I hesitate to introduce another smaller size because I think it makes people feel like they need to design for that size, and in my experience you just kinda don't. What we usually do if anything is just add a max-width of say 475px or so to the mobile design, so that at 600px wide you just see a narrow design with some extra breathing room on the sides. I've found it's rare to even be able to do much with that extra space — it tends to not be enough to introduce another column of content until you get up to that 640px range anyways. Anyways — I wouldn't say it's something we're totally opposed to ever adding but it's never really been obvious to me what the number should be or why.
This is definitely not the intention — the idea with the Tailwind defaults is that you build things mobile-first, so a class with no breakpoint is targeting mobile, and then you add https://tailwindcss.com/docs/responsive-design#working-mobile-first |
Beta Was this translation helpful? Give feedback.
-
|
Hi adam! firstly; THANKS for sharing your thoughts here, i imagine that took you a nontrivial amount of time to write, and i appreciate the investment. re: max-w 475 that’d be a good starting-point guide for peeps i suspect speaking from my initial meander into mobile ui layout
…And I reached for 600w Was my strategy lazy and misinformed? ABSOLUTELY… but i didn’t know what to pick at the time, and used 640 as an inferred min-size-of-non-mobile-viewport agree it’s not the intention… however in the absence of a guide, someone not acutely familiar with design may not pick up on the hint. i think if the docs offered the max-w guidance mentioned above, that mighta steered me in a better initial trajectory, but i really dunno … regardless… thanks for sharing your perspective! W |
Beta Was this translation helpful? Give feedback.
-
|
my config will help you. |
Beta Was this translation helpful? Give feedback.
-
|
the point isn’t just to add a smaller breakpoint only in my config, (which i’ve already done, somewhat similarly, so seeing yours does validate my thought… thanks for sharing!) but rather to bring the conversation up to try and understand what i’m missing that this isn’t already a thing |
Beta Was this translation helpful? Give feedback.
-
|
This is really helpful, thanks |
Beta Was this translation helpful? Give feedback.
-
Responsive design have should lower breakpoints by default
Most applications I have worked on have always had breakpoints as low as 320px. In my opinion I believe it helps with inclusivity for devices with smaller screen sizes.
Beta Was this translation helpful? Give feedback.
All reactions