Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2018
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unique CSS stylesheet for all phone screens?

    Hey,

    Would it be possible to make a responsive website for all phone screen with a single CSS stylesheet?

    So far I had to make a CSS stylesheet for every type of phone, it's draining.

    Cheers,

    Spitz

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,594
    Thanks
    3
    Thanked 641 Times in 627 Posts

    Quote Originally Posted by Spitz View Post
    Would it be possible to make a responsive website f
    or all phone screen with a single CSS stylesheet?
    Yes, of course it is, with @media ( max-width: { some-value } em ).

    Further reading:-


    coothead
    ~ the original bald headed old fart ~

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,405
    Thanks
    7
    Thanked 1,375 Times in 1,344 Posts
    Quote Originally Posted by Spitz View Post
    So far I had to make a CSS stylesheet for every type of phone, it's draining.
    If you had to do this then you’re doing something wrong. You can impossibly have a style sheet for every type of phone; there are hundreds of different types and versions of mobile phones with hundreds of different display resolutions and pixel densities. What you should rather do is create layouts that are flexible enough so that they can adapt to different viewports with the least amount of code possible.

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,736
    Thanks
    5
    Thanked 535 Times in 521 Posts
    Quote Originally Posted by VIPStephan View Post
    there are hundreds of different types and versions of mobile phones with hundreds of different display resolutions and pixel densities.
    Hundreds upon hundreds of thousands. The number of permutations would take a Vulcan to calculate.

    Yeah, I would suspect that @Spitz has been taught incorrect/nonsensical site building techniques given the very nature of the question. The appropriate / best way -- at least IMHO -- to make a responsive layout is as follows.

    1) take your content or a reasonable facsimile of future content and put it into a flat text editor as if HTML and CSS do not even EXIST! Put it in as logical an order as you can as if you were going to read it normally beginning to end.

    2) Apply semantic markup saying what things ARE, and NOT what you want them to look like. If at this stage -- or any stage really -- you choose a semantic tag (basically every tag other than DIV, SPAN, and A) because of its default appearance, you're screwing it up!

    3) Create a desktop layout by adding any extra semantically neutral tags (DIV and SPAN) as needed, but keeping the classes and ID's saying what things ARE. This is part of the "separation of concerns" where what things look like has ZERO HUFFING BUSINESS IN THE MARKUP!!!. Hence why "frameworks" that use classes such as w3-red, text-shadow, col-12-m, etc, etc are mentally enfeebled trash.

    Some people say "mobile first" and that's BS. Utterly and totally back-assward approach to design because we can target mobile with media queries. We CAN'T target legacy desktop, so start with what is a default and then work down with media queries.

    Said layout at this point should be:

    3a) Elastic. As much as possible defined in EM, NOT PX. Pixels is accessibility trash. If you are even THINKING in pixels for anything other than <img> tags, you're doing it wrong.

    3b) Semi-fluid. Allow at least ONE column (content) to expand/shrink with the page size, aka the normal behavior. The "semi" part means set a max width so that long paragraphs of text are easier to follow.

    Once you have that:

    4) reduce the screen width until the layout breaks. That's your media query break width. figure out how many EM that is, give it 5% extra for wiggle room, and adjust the layout so it fits inside such a query.

    5) lather, rinse, repeat step 4. Once you're down below 16em you're done.

    6) then and only then consider enhancing the already fully functioning page with JavaScript. Good scripting should enhance what's already working whenever possible, and NOT be your only means of functionality.

    This process is called 'progressive enhancement" and is the means by which so many headaches can be avoided. It provides "graceful degradation' so that should any part of the process, JS, CSS, even HTML go awol, the user still gets a page that's at least usable.

    ... and that step 4, just override your existing style at the end of your stylesheet.

    My article on the subject might help.
    https://cutcodedown.com/article/progressive_enhancement

    Stage 3's CSS:
    https://cutcodedown.com/progressive/...out/screen.css

    being relevant to what you're doing. See the media queries at the end? They just override the existing style above it.

    ... and for the love of Christmas do NOT think "specific phones in specific sizes" -- that's the fastest way to drive yourself nutters.
    Last edited by deathshadow; Oct 12th, 2019 at 11:18 AM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •