javascript - CSS media queries get messed up -

-

it's not serious question, want share , more information css media queries.

i find own css media queries comfortable, still has many flaw in it. know today mobile device growing fast, of them has same resolution tablet or laptop.

let's case

this order of media queries in index.php

    <!-- bootstrap -->     <link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css">     <!-- custom -->     <link rel="stylesheet" type="text/css" href="style/css/main.css">     <link rel="stylesheet" type="text/css" href="style/css/laptop.css">     <link rel="stylesheet" type="text/css" href="style/css/mobile.css">
  1. i using bootstrap make type less,
  2. main.css dekstop view, best view on desktop resolution, 1920x1080p , below not perfect.
  3. mobile.css device phone , tablet, , default mobile device , ipad resolution, android resolution little bit messed because of android resolution rough , unidentify, , if device media queries away 768px messed up,

  4. laptop.css laptop view , not working thought.

    this css code each media main.css plain, mobile.css like

    /*default*/ @media screen , (max-width: 768px) {   button, font, etc. }   /*default portrait*/ @media screen , (max-width: 768px) , (orientation: portrait) {  working on both kind of device ios , android. }   /* ipad portrait */ @media screen    , (min-device-width: 768px)    , (max-device-width: 1024px)    , (orientation: portrait)    , (-webkit-min-device-pixel-ratio: 1) { }   /* ipad landscape */ @media screen    , (min-device-width: 768px)    , (max-device-width: 1024px)    , (orientation: landscape)    , (-webkit-min-device-pixel-ratio: 1) { }   /*default landscape*/ @media screen , (max-width: 768px) , (orientation: landscape) {     1 it's little bit tricky because of phone device has length laptop resolution. }

    and laptop.css

    @media screen     , (min-device-width: 1024px)     , (max-device-width: 1280px)     , (-webkit-min-device-pixel-ratio: 1) {  got old laptop, square laptop too.    }  /* ----------- non-retina screens ----------- */ @media screen    , (min-device-width: 1200px)    , (max-device-width: 1600px)    , (-webkit-min-device-pixel-ratio: 1) {    }  /* ----------- retina screens ----------- */ @media screen    , (min-device-width: 1200px)    , (max-device-width: 1600px)    , (-webkit-min-device-pixel-ratio: 2)   , (min-resolution: 192dpi) {    }

this link i've got media queries, not of them picked. , adding of media queries.

the terrific of them absolute position , flying 2 dives img below. in here looks still not perfect, im afraid if device out of resolution media queries messed up.

enter image description here enter image description here

so, web developer, media queries? hope u can drop answer , inspiration in here.

i saw using multiple files media queries. try combine them in 1 media.css & solve half of problems. using media queries multiple files causes conflict.


Comments

Post a Comment

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

-
i have password protected page on frontend. on page, want display full list of purchases associated single woocommerce product id. option 1: i've looked through woocommerce docs , , found: wc_cli_order , list_( $args, $assoc_args ) function lists orders. presumably, orders can filtered product id [--=] filter orders based on order property. line item fields (numeric array, started index zero): line_items.0.product_id option 2: i found article , based on customer id. i've modified code based on guesses meta_key , meta_value. $customer_orders = get_posts( array( 'numberposts' => -1, 'meta_key' => '_product', 'meta_value' => get_product_id(), 'post_type' => wc_get_order_types(), 'post_status' => array_keys( wc_get_order_statuses() ), ) ); how display orders single product showing recent order first? here solution put based on these articles: http://www.w...
Read more

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

-
i'm having difficult time , hope guys can help. using helicon isapi rewrite version 3.1.0.104 on our iis server. edit http.conf file , have tried , still fail. this trying do: redirect url: https://www.domain.com/switch-by-version?version=2.8.5.2594 to: https://test.domain.com/load/load.aspx?tver=2.8.5.2594 the version number @ end source url change, , need target url have same version number @ end of url example above shows. i tried following not work: rewritecond %{query_string} ^version=(\d\d?)\.(\d\d?)\.(\d\d?)\.(.*)$ [nc] rewriterule ^/switch-by-version(.*)$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l] any appreciated! thanks. if it's running in equivalent context of .htaccess , rule shouldn't start / . here's simpler version: rewritecond %{query_string} ^version=(\d+\.\d+\.\d+(?:\..+)?)$ [nc] rewriterule ^switch-by-version/?$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l]
Read more

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -

-
https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps following tutorials, try write authentication restrict admin panel, didn't understood how can that. this admin panel, admin panel don't want show , request database unauthenticated users. my laravel-routes route::get('/admin',function(){ return view('index'); }); route::get('/api/v1/employees/{id?}', 'employees@index'); route::get('/api/v1/users/{id?}', 'employees@users'); route::post('/api/v1/employees', 'employees@store'); route::post('/api/v1/employees/{id}', 'employees@update'); route::delete('/api/v1/employees/{id}', 'employees@destroy'); route::group(['prefix' => 'api'], function() { route::resource('authenticate', 'authenticatecontroller', ['only' => ['index']]); route::post('authenticate', 'authentic...
Read more