to every devices size no matter the orientation a < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h " > b < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " > c < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 , m a x i m u m - s c a l e = 1 " > d Bug in IE mobile fix is rolling out @ v i e w p o r t { w i d t h : d e v i c e - w i d t h } ;
H e a d i n g < / h 1 > < d i v c l a s s = " p a n e l " > < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s c i n g e l i t . D u i s l u c t u s n i s i e t e r o s b i b e n d u m l a c i n i a . C u r a b i t u r s e d e s t n e c < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s c i n g e l i t . D u i s l u c t u s n i s i e t e r o s b i b e n d u m l a c i n i a . C u r a b i t u r s e d e s t n e c < / d i v > @ i m p o r t " c o m p a s s " ; $ b a s e - l i n e - h e i g h t : 2 4 p x ; $ b a s e - f o n t - s i z e : 1 6 p x ; h t m l { l i n e - h e i g h t : r h y t h m ( 1 ) ; f o n t - s i z e : $ b a s e - f o n t - s i z e ; f o n t - f a m i l y : H e l v e t i c a , s a n s - s e r i f ; }
video or any other element across different screen sizes a fitvids js b m a x - w i d t h : 1 0 0 % c m a x - h e i g h t : 1 0 0 % d Zero height padding hack
c l a s s = " m e d i a - - r a t i o - 1 6 - 9 " > < i f r a m e w i d t h = " 4 2 0 " h e i g h t = " 3 1 5 " s r c = " / / w w w . y o u t u b e . c o m / e m b e d / U G - 0 F R m m 5 J E " f r a m e b o r d e r = " 0 " a l l o w f u l l s c r e e n > < / i f r a m e < / d i v > < d i v c l a s s = " m e d i a - - r a t i o - 4 - 3 " > < i m g c l a s s = " m e d i a - - r a t i o _ _ i n n e r " s r c = " h t t p : / / i . i m g u r . c o m / J 4 V p c k x . j p g " a l t = " D o g e H u n t e r " / > < / d i v > @ i m p o r t " c o m p a s s " ; b o d y { f o n t - f a m i l y : H e l v e t i c a , s a n s - s e r i f ; m a r g i n : r h y t h m ( 1 ) a u t o ; m a x - w i d t h : r h y t h m ( 4 0 ) ; } % m e d i a - - r a t i o { p o s i t i o n : r e l a t i v e ; p a d d i n g - t o p : r h y t h m ( 1 ) ; h e i g h t : 0 ; m a r g i n : 0 0 r h y t h m ( 1 ) ; o v e r f l o w : h i d d e n ; i f r a m e , o b j e c t , v i d e o , cdpn io Ctroe
devices but touchable on touch devices a Media Queries Soon b Feature detection e g Modernizr c Custom javascript event handlers d User agent detection
S h o w t h e m e n u o n h o v e r , c l i c k o r t o u c h . P e r s i s t i f i t i s c l i c k o r t o u c h . < / p > < d i v i d = " m e n u _ _ c o n t a i n e r " c l a s s = " m e n u _ _ c o n t a i n e r " > < a h r e f = " # m e n u " i d = " m e n u _ _ b u t t o n " c l a s s = " m e n u _ _ b u t t o n " > M e n u < / a > cdpn io aCiol
event a fastclick js b < m e t a n a m e = " v i e w p o r t " c o n t e n t = " u s e r - s c a l a b l e = n o " > c Use native javascript touch events d All of the above But try not to use user scalable no
and Yeoman have a Linting concatenating and minifying JS CSS b Compiling CSS Preprocessors Sass Stylus etc c Optimising images d Automatically scaffold new apps e Handle external dependencies f Recompile your project and refresh your browser on save g Automatically create icon fonts h Deploy your project i Inflate your ego j All of the above
" h t t p : / / p l a c e h o l d . i t / 3 0 0 . j p g " s r c - 1 = " ( m i n - w i d t h : 3 0 0 p x ) h t t p : / / p l a c e h o l d . i t / 5 0 0 . j p g " s r c - 2 = " ( m i n - w i d t h : 5 0 0 p x ) h t t p : / / p l a c e h o l d . i t / 8 0 0 . j p g " a l t = " P l a c e h o l d e r I m a g e " >
i v > < s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " v i e w B o x = " 0 0 3 7 5 2 3 1 " p r e s e r v e A s p e c t R a t i o = " x M i d Y M i d m e e t " t a b i n d e x = " - 1 " a r i a - l a b e l = " t h e a r i a l a b e l i s b e i n g r e a d " r o l e = " i m g " t i t l e = " t h e t i t l e a t t r i b u t e o f t h e S V G i s b e i n g r e a d " > < t i t l e > C l o w n C a r T e c h n i q u e < / t i t l e > < s t y l e > s v g { b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ; b a c k g r o u n d - r e p e a t : n o - r e p e a t ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 4 0 0 p x ) { s v g { b a c k g r o u n d - i m a g e : u r l ( " h t t p : / / s . c d p n . i o / 1 6 8 / p i c - M e d i u m - 3 7 5 x 2 3 1 - @ 1 x - 7 2 p p i . j p g " ) ; o u t l i n e : g r e e n s o l i d 5 p x ; } } @ m e d i a s c r e e n a n d ( m i n - w i d t h : 4 0 1 p x ) , s c r e e n a n d ( m a x - w i d t h : 4 0 0 p x ) a n d ( - w e b k i t - m i n - d e v i c e - p i x e l - r a t i o : 1 . 7 5 ) { s v g { cdpn io idLHt
year report Clown Car Technique Solving Adaptive Images In Responsive Web Design tabatkins github io specs respimg Overview html html doctor com responsive images end of year report bit ly hW hVc
> < s v g w i d t h = " 9 6 " h e i g h t = " 9 6 " > < i m a g e x l i n k : h r e f = " h t t p : / / a s s e t s - z a n a t a . r h c l o u d . c o m / m a s t e r / l o g o . s v g " s r c = " h t t p : / / a s s e t s - z a n a t a . r < / d i v >
l a s s = " g " > < l i c l a s s = " g _ _ i t e m w - - 1 - 4 p h " > 1 ( 1 / 4 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 2 p h " > 2 ( 1 / 2 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 4 p h " > 3 ( 1 / 4 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 4 p h " > 4 ( 1 / 4 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 4 p h " > 5 ( 1 / 4 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 4 p h " > 6 ( 1 / 4 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 8 p h " > 7 ( 1 / 8 ) < / l i > < l i c l a s s = " g _ _ i t e m w - - 1 - 8 p h " > 8 ( 1 / 8 ) < / l i > < / u l > @ i m p o r t " c o m p a s s " ; $ g r i d - p a d d i n g : r h y t h m ( 1 ) ; cdpn io GitgI
i v c l a s s = " t a b l e - - o v e r f l o w " > < t a b l e > < t r > < t h > T a b l e H e a d e r 1 < / t h > < t h > T a b l e H e a d e r 2 < / t h > < t h > T a b l e H e a d e r 3 < / t h > < t h > T a b l e H e a d e r 4 < / t h > < t h > T a b l e H e a d e r 5 < / t h > < t h > T a b l e H e a d e r 6 < / t h > cdpn io xFbKk
The number of columns displayed in the table below depends on the available screen space, by default; a smartphone will display 2 columns, for example, while an expanded desktop browser displays the full set. This is accomplished by assigning semantic classes to the column headings that indicate which data values take precedence (essential vs optional), in combination with media queries to display them at different screen widths (a.k.a., responsive design). We added a bit of JavaScript logic so you can control which data is displayed by checking column names in the "Display" menu on the right. Once an option is checked, the associated data will persist and display at all screen widths until the option is unchecked. You can also set a column to always persist by assigning a class in the markup, in which case it has no menu option. Here, the "Company" column is persistent. Company Last Trade Change GOOG 597.74 14.81 (2.54%) AAPL 378.94 5.74 (1.54%) AMZN 191.55 3.16 (1.68%) ORCL 31.15 1.41 (4.72%) MSFT 25.50 0.66 (2.67%) CSCO 18.65 0.97 (5.49%) YHOO 15.81 0.11 (0.67%) Display Google Inc. Apple Inc. Amazon.com Inc. Oracle Corporation Microsoft Corporation Cisco Systems, Inc. Yahoo! Inc. filamentgroup com examples rwd table patterns
Result Edit on < d i v c l a s s = " f l o a t e r " > < d i v c l a s s = " f l o a t e r _ _ i t e m " > < i m g s r c = " h t t p : / / p l a c e h o l d . i t / 1 5 0 " a l t = " " / > < / d i v > < d i v c l a s s = " f l o a t e r _ _ c o n t e n t " > < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s c i n g e l i t . D u i s l u c t u s n i s i e t e r o s b i b e n d u m l a c i n i a . C u r a b i t u r s e d e s t n e < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s c i n g e l i t . D u i s l u c t u s n i s i e t e r o s b i b e n d u m l a c i n i a . C u r a b i t u r s e d e s t n e < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s c i n g e l i t . D u i s l u c t u s n i s i e t e r o s b i b e n d u m l a c i n i a . C u r a b i t u r s e d e s t n e < / d i v > < / d i v > @ i m p o r t " c o m p a s s " ; b o d y { f o n t - f a m i l y : H e l v e t i c a , s a n s - s e r i f ; m a r g i n : 0 ; p a d d i n g : r h y t h m ( 1 ) ; l i n e - h e i g h t : r h y t h m ( 1 ) ; } i m g {