media-queries

问题 I want change a div element's position [in the viewed document order] by media query. <div>1</div> <div>2</div> When I change my viewport then I want to div_1 stay under the div_2 . Basically div_1 on the top. But I want change it by Media query. Can it is possible?? 回答1: Use flexbox and its order property I recommend a .wrapper , though you can use it on the body as well and get the same result @media screen and (max-width: 800px) { .wrapper { display: flex; flex-direction: column; }

问题 Is there a workaround to use physical screen width in CSS media queries? Today, there are phones which exceed the resolution of desktop monitors. However, phones should still display the mobile layout and desktops the standard layout. So I can't rely on pixel based queries like the example below. Instead, I need either a physical measurement, or one about the pixel density. @media screen and (min-width: 700px) { } Since I haven't found such measurements through my research, they might not

问题 Is there a workaround to use physical screen width in CSS media queries? Today, there are phones which exceed the resolution of desktop monitors. However, phones should still display the mobile layout and desktops the standard layout. So I can't rely on pixel based queries like the example below. Instead, I need either a physical measurement, or one about the pixel density. @media screen and (min-width: 700px) { } Since I haven't found such measurements through my research, they might not

问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 1 year ago . Improve this question What is the best way to place media queries in HTML? In same CSS file like: .my-text { font-size: 30px; } @media only screen and (max-width : 768px) { .my-text { font-size: 24px; } } .my-img { width: 100%; } @media only screen and (max-width : 768px) {

问题 For example, how many pixels does the iPhone with a Retina display appear to a media query? Is it 320 pixels or 640 pixels? If it's 640 pixels, how can a website deal with different device resolutions? Is there any way to use units that are the same regardless of a screen's resolution? 回答1: Retina devices like the iPhone and iPad usually use 2 device pixels = 1 CSS pixel. So a media query like this: @media all and (max-width: 320px) { } actually will target an iPhone (portrait), even though

问题 I'm trying to make it so that my navbar gets centered once it reaches phone width screen size. I figure I just do @media all and (max-width: 600px) { {.menu ul? text-align: center;} } and I put that all under the css for desktop size. (Be nice. I just graduated Bootcamp :) ) <div class="hero-image"> <div class="topnav"> <ul class="menu"> <li class="item"><a href="#">Home</a></li> <li class="item"><a href="#">My Work</a></li> <li class="item"><a href="#">About Me</a></li> </ul> </div> <div

问题 I'm trying to align a DIV in the middle of the page when the size is less than 768px I have one parent DIV that contains three different DIVs. So I used media queries and within one display size I added this " clear:both " to the display_type and buttons classes. So in that way each div will be in its own row. <div class="category_header container"> <div class="products"> <label class="header t_left">Sorter efter:</label> <div class="select t_left"> </div> <div class="display_type"> <ul class

问题 I want to create four children that are next to each other. Now, when the viewport-width gets smaller, these are supposed to collaps to a two by two grid. (Less important: When it gets even smaller they shall be 100% of the parent's width.) Now my problem is not to create this with media queries. The problem is that the first child has a bigger height than the height of the second child. When they collaps to a 2 by 2 grid the third child is always placed below the second child and not (how I

问题 I am using the same stylesheet for the main site as well as a 'preview' of the site (NOT in an iframe because I need it to be interactive). The issues is, the preview does not take up 100% of the screen width, so when media queries are based on screen size, the page behaves oddly. I am ok with making the editor/preview mode fixed width, though, so I thought perhaps there is some way I can disable the media-queries under certain conditions? I have no idea how to approach that, though. Either

问题 I am doing a quick mobile version of my desktop site in bootstrap and running into some formatting issues. When I expand this view on my desktop, my icons show in a 3 by 4 grid just fine. When I narrow does the width of the window, the grid of images acts accordingly and narrows down to 1 column with all 12 images per row, with no horizontal side bar. However, when I am viewing this on mobile, my my nav bar does not 'snap' to the width of the visible resolution per say and allows me to side