Results 1 to 4 of 4

Thread: Percentage and Pixel in website

  1. #1
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    54
    Thanked 3 Times in 3 Posts

    Default Percentage and Pixel in website

    Now a days there are different devices are available at different screen sizes,

    which is best method we can use pixel or percentage for websites ?

    If it is pixel as screen size we use pixel as font size
    if it is percentage as screen size we use em as font size/or pt is good ? then line-height, margin, and padding can be set to which one ?
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Ems perform best with scalability on mobile devices so are generally better for responsive design.

    It comes down to personal preference, but nowadays I generally like to use (r)ems for font-size, line-height, margins and paddings and %/px for layout (% for responsive columns/floats and px for overall max-width limits).

    Some useful resources;

    http://snook.ca/archives/html_and_cs...-size-with-rem

    http://kyleschaeffer.com/user-experi...s-px-vs-pt-vs/

    http://www.impressivewebs.com/unders...-em-units-css/

    http://www.smashingmagazine.com/resp...nes-tutorials/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    54
    Thanked 3 Times in 3 Posts

    Default

    @Beverley

    Do you feel rem is secure ? Moreover it increases the size of style sheet..
    as far as from the information you provided

    html { font-size: 62.5%; }
    body { font-size: 14px; font-size: 1.4rem; } /* =14px */
    h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

    while using rem, we need to code it in pixel also for supporting other old browsers, if we are using rem as font-size and using pixel with it is a complicated thing i mean because we are avoiding pixel while the screen size is taken in percentage, then adding pixel in percentage is not at all incompatible.

    if it is only in em it support all browsers, doesn't need additional coding in pixel..
    also putting font size in px and font size in rem both will increases the size of style sheet comparing with using em, because we are not using px with em
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Like I said, its personal preference so do what you feel most comfortable with. A few extra declarations for older browsers, namely IE 8 and under, isn't going to be that expensive in the grand scheme of things. Support: http://caniuse.com/rem

    It sounds like you've already made your decision (as I have), which is good. I believe that's drawn the thread to a convenient close and the linked resources will be useful to anyone else who is curious to research the topic of responsive design too.
    Last edited by Beverleyh; 05-08-2013 at 09:09 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Changing Width from Pixel to Percentage
    By blwol in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-19-2009, 05:44 AM
  2. How To Change Pixel into percentage
    By web_spider_2008 in forum CSS
    Replies: 3
    Last Post: 06-27-2008, 07:44 PM
  3. Percentage Height and Width
    By hurry in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 01-28-2008, 06:25 AM
  4. Percentage Calculator
    By julmado in forum JavaScript
    Replies: 5
    Last Post: 02-10-2006, 06:04 PM
  5. Percentage Calculator
    By julmado in forum HTML
    Replies: 3
    Last Post: 02-10-2006, 05:25 AM

Bookmarks

Posting Permissions

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