Scribd Logo
Upload

Welcome to Scribd!

  • 11 views

    Responsive Design: Practices To Use

    Uploaded by

    Natu Paiano
    This document discusses responsive design practices including using em and rem units for font sizes, clickable elements with touch targets, and media queries to apply different styles based on screen size. It also covers flexbox properties for flex containers and items to adapt layout depending on screen width.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Responsive Design: Practices To Use

    Uploaded by

    Natu Paiano
    11 views6 pages
    This document discusses responsive design practices including using em and rem units for font sizes, clickable elements with touch targets, and media queries to apply different styles based on screen size. It also covers flexbox properties for flex containers and items to adapt layout depending on screen width.

    Original Description:

    Original Title

    Responsive_Design

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses responsive design practices including using em and rem units for font sizes, clickable elements with touch targets, and media queries to apply different styles based on screen size. It also covers flexbox properties for flex containers and items to adapt layout depending on screen width.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    11 views6 pages

    Responsive Design: Practices To Use

    Uploaded by

    Natu Paiano
    This document discusses responsive design practices including using em and rem units for font sizes, clickable elements with touch targets, and media queries to apply different styles based on screen size. It also covers flexbox properties for flex containers and items to adapt layout depending on screen width.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 6

    📱

    Responsive Design
    Practices to use
    Em and Rem Units
    Em Unit
    Rem Unit
    Clickable elements
    Media Queries
    Devices
    Properties
    Flexbox
    Properties for the childs (flex items)

    Practices to use
    Set the viewport/scale html tag.

    Use fluid widths as oppose to fixed ⇒


    containers using max-width instead of width
    allows containers to adapt to smaller screen sizes.

    Media queries

    Rem units over px ⇒keeps sizing intact all over the page because rem unit is a
    multiplier of whatever the root html element font size is.

    Mobile first method ⇒ design first for mobile and then add media queries for larger
    screens.

    Em and Rem Units


    The advantage of using relative units is that the content can enlarge and force other
    contents down the page.

    Responsive Design 1
    EM and REM units are usefull for applying them to font-sizes.

    Em Unit
    Is a multiplier relative to the font size of its parent container

    Rem Unit

    Relative to the font size of the root html element. <html> tag default
    font-size is 16px

    Clickable elements
    Every clickable element should have the area of a fingertip and the space between each
    other should be of that size too. The icons can be smaller, but we can add padding to
    make the final target touch area the size of that 48 device independent pixels.

    Responsive Design 2
    For elements arranged horizontally, the touch targets should be spaced about 32 dp
    both horizontally and vertically (we could add a margin) so the users finger pressing
    onto each target will not overlap into another one.

    Responsive Design 3
    Media Queries
    We can create different .css files for the media queries. Ex: mobile.css.
    We can add a media attribute to our link tag so depending on the screen size it's going
    to load that .css file.

    <link rel="stylesheet" media="screen and (max-width: 768px)" href="mobile.css">

    This is going to load our stylesheet only if the screen is 768 or less
    (tablet or less). We always going to want to have this under our
    MAIN stylesheet (this way is going to have precedence over the
    main .css file).

    Devices
    Smart phones: max 500px.

    Tablets: max 768px.

    Normal: max 1200px

    Widescreen: <1200px.

    Landscape (turned device): max-height 500px.

    Properties
    @media only screen ⇒ only screen only applies to screen.
    max-width ⇒ (to) everything UNTIL the defined width (included)
    min-width ⇒ (from) everything STARTING from the defined width (included)

    Responsive Design 4
    max-height ⇒(to) everything UNTIL the defined height (included). Everything we
    have for the width stills applies to it.

    Flexbox

    💡 When not having a defined height, the height of the container will be the
    height of the content within it

    justify-content ⇒ align along the main axis (horizontal in row, vertical in column).
    align-items ⇒ aligns items along the cross axis (vertical in row, horizontal in
    column). For this to take effect, set a height to the container. When setting it to
    stretch it will stretch the items to be the height (column) or width (row) of the
    container.

    align-content ⇒align when extra space in the cross axis. For example, when
    having multiple rows of elements

    flex-wrap ⇒ default is set to no-wrap. If we set it to wrap, the elements will move to
    the next row when reducing the size of the screen.

    flex-shrink ⇒ if set to 0 makes the items to never change they size when reducing
    the screen.

    flex-grow ⇒
    if set to 1 makes the items grow evenly to take the remaining space
    when screen is bigger.

    Properties for the childs (flex items)


    flex-shrink ⇒ If set to 0 the item will never change its size when reducing the
    screen.

    Responsive Design 5
    flex-grow ⇒ if set to 1 grows to take the remaining space when screen is bigger.
    When setting to a >1 value it will grow exponencially (bear in mind that if the flex
    container has a width it will take that width into account).

    flex-basis ⇒ when growing the element (with flex-grow set to 2 for example), makes
    the element to grow exactly the double of the size without caring about the width of
    the parent flex container.

    flex: grow shrink basis ⇒ shorthand for the three previous properties. Mostly of the
    time we'll see flex: 1 (flex-grow: 1).

    Responsive Design 6

    You might also like