example responsive media query for tablet?
-
What should be my media query for tablet?
Below you can see my queuing script in my functions.php, the main stytle sheet has no media query, and my mobile style sheet is /child_media_600_max.css.
I have added an child_media_600_min.css style sheet too, for the case that I want to exclude something from mobile.But for tablet I would need a min-max combination, since that screen size is in between mobile and desktop.
How would that min-max media query ideally look for tablet?
I know that this is not mobile first approach that I don’t understand that enough to be able to code it.
So I would start out like this.
I just need am other style sheet for table, and I need to write a min-max media query for tablet that has both a minimum and a maximum viewport size limit.These media queries below are not defined for viewport size but for pixels, but I haven’t found yet example media queries for viewport size (much smaller numbers) because I know that only the viewport size matters and not the actual device pixels, because non-desktop devices despite that have a very high actual resolution, they “fuse” multiple pixels into one virtual pixel, so that’s why only the viewport size matter, not the actual pixel size. Viewport size is scaled down pixel dimensions.
I need separate style sheets also because Not just that I want different layouts and sizes, but I also want different structure and content on different devices. Which might not be a good idea but I don’t now what else to do about it at the moment. For example some desktop content like ads, need to be hidden on mobile becausde there is simply no place left for it on mobile. I was told this is not a good practice and that I just should create fallback css so that the layout shifts instead of removing content or changing content among devices, because if a new devices comes in, that might have content that will not properly fit on the screen, because of the new custom device viewport size.
Could someone give an example of a media query for tablet, that would cover all tablets, making sure that that layout could not be extended to desktop or mobile?
function my_load_child_theme_styles() { if ( ! defined( 'WPEX_THEME_STYLE_HANDLE' ) ) { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), '1.0' ); } // First de-register the main stylesheet (which is now your child theme style.css) wp_dequeue_style( WPEX_THEME_STYLE_HANDLE ); wp_deregister_style( WPEX_THEME_STYLE_HANDLE ); // Add the parent style.css with the main style handle wp_enqueue_style( WPEX_THEME_STYLE_HANDLE, get_template_directory_uri() . '/style.css', array(), WPEX_THEME_VERSION ); // Re-add child CSS with parent as dependency wp_enqueue_style( 'child-css', get_stylesheet_directory_uri() . '/style.css', array( WPEX_THEME_STYLE_HANDLE ), '1.0' ); wp_enqueue_style( 'child_media-css', // stylesheet handle get_stylesheet_directory_uri() . '/child_media_600_max.css', // stylesheet file URL array( WPEX_THEME_STYLE_HANDLE ), // dependencies '1.0', // stylesheet version 'only screen and (max-width:600px)' // media query ); wp_enqueue_style( 'child_media-css', // stylesheet handle get_stylesheet_directory_uri() . '/child_media_600_min.css', // stylesheet file URL array( WPEX_THEME_STYLE_HANDLE ), // dependencies '1.0', // stylesheet version 'only screen and (min-width:600px)' // media query ); } add_action( 'wp_enqueue_scripts', 'my_load_child_theme_styles', PHP_INT_MAX );
- The topic ‘example responsive media query for tablet?’ is closed to new replies.