media-queries

Using rem units in media queries and as width

由 狂风中的少年 提交于 2020-03-26 05:51:31
问题 When using rem units in Google Chrome (or firefox), the result is unexpected. I'v set up a page with the root font-size set to 10px to make it easier the translate a pixel based design to html/css. This is my css. My expectation would be a page with one 500px wide box and if the screen is wider than 500px the background should turn red. html { font-size: 10px; } @media screen and (min-width: 50rem){ body{ background-color: red; } } .test{ width: 50rem; background: black; height:100px; } But,

Media queries within an iframe, or SCORM without frames

由 半腔热情 提交于 2020-03-25 04:15:10
问题 I have a responsively designed (using media queries) web based training (WBT) lesson. By default, this WBT does not use any frames, for accessibility concerns and etc. However, when deployed from a SCORM LMS, it uses a file which acts as a frameset, for the SCORM communication. Like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title of Course Here</title> <script src="../common/scripts/scorm.js"></script> <style> html, body {margin:0; overflow:hidden; padding:0;

Using proper CSS media queries in Angular

由 五迷三道 提交于 2020-03-22 04:05:32
问题 I read that in Angular it is a very bad practice to use the CSS hidden element to hide an element like this: .container{ background-color : powderblue; height : 50px; width : 100% } @media (max-width: 400px){ .container{ display: none; } } <div class="container"></div> And I know the Angular way to show or hide an element is using the *ngIf directive. Question How can I get the * ngIf to react on the media query in an 'Angular fashion'? 回答1: You can use angular/breakpoints-angular-cdk follow

Defining CSS media queries within selectors

由 你说的曾经没有我的故事 提交于 2020-03-17 06:44:31
问题 Are there any issues (performance is my primary concern) if instead of defining css selectors within media queries (example 1), you define media queries within css selectors (example 2). Example 1 - css selectors within media queries @media (min-width: 600px) { .foo { ... } .bar { ... } .hello { ... } .world{ ... } } @media (min-width: 1000px) { .foo { ... } .bar { ... } .hello { ... } .world{ ... } } @media (min-width: 1500px) { .foo { ... } .bar { ... } .hello { ... } .world{ ... } }

put one div above the other in media queries

由 让人想犯罪 __ 提交于 2020-02-25 04:13:08
问题 So I have two divs, on big screens they are side by side. <div1> <div2> On smaller screens, I want to get <div2> <div1> I guess I could remove the float and put width:100% and display:block; . And the two divs are the one above the other, we are half-way there. But how I put the div2 above the div1 ? I tried putting opposite floats, one div floats right, the other left, but no luck. Is negative margin a legit solution for a responsive web app where everything is fluid? I cannot get the div1

How to show text only on mobile with CSS?

由 こ雲淡風輕ζ 提交于 2020-02-04 09:34:20
问题 I have a text (in a div) which shows on desktop and mobile screens. Expected I want the text to only show in @media only screen and (max-width: 768px) How to hide the div with display:none or is there any other solution? 回答1: Use media query. Set display:none to div and then apply display:block for mobile using max-width media query. Stack Snippet div { display: none; } @media only screen and (max-width: 768px) { div { display: block; } } <div>Text</div> or you can use the min-width media

How to show text only on mobile with CSS?

由 杀马特。学长 韩版系。学妹 提交于 2020-02-04 09:31:04
问题 I have a text (in a div) which shows on desktop and mobile screens. Expected I want the text to only show in @media only screen and (max-width: 768px) How to hide the div with display:none or is there any other solution? 回答1: Use media query. Set display:none to div and then apply display:block for mobile using max-width media query. Stack Snippet div { display: none; } @media only screen and (max-width: 768px) { div { display: block; } } <div>Text</div> or you can use the min-width media

Media queries running weird because of non-integer width

由 风流意气都作罢 提交于 2020-02-04 05:15:07
问题 Can't say is it a real problem or I'm just being paranoid but this behavior of media queries is really driving me crazy for last couple of hours. Let's consider this really simple CSS. body {background:yellow} @media (max-width:399px) { body {background:red} } @media (min-width:400px) { body {background:blue} } Problem happens when width is 399.333px! (or any float-value between 399 and 400 integers) My logic says that by using this CSS style page will never turn yellow, right? It should be

How to change text (not font size) according to screen size in CSS?

由 对着背影说爱祢 提交于 2020-01-30 20:25:07
问题 I want to use abbreviation of days in small screen size. For example when screen is shrinked I want to change 'Saturday' to 'Sat' . How can I do this? 回答1: Have 2 spans with full and short strings, then when below target resolution, swap between them using a media query: HTML <span class="full-text">Saturday</span> <span class="short-text">Sat</span> CSS // Hide short text by default (resolution > 1200px) .short-text { display: none; } // When resolution <= 1200px, hide full text and show

Change layout based on screen size

由 只愿长相守 提交于 2020-01-30 11:52:25
问题 I would like the content of my website header to occupy 100% of the screen width on regular-sized desktops/laptops, but to be centered on larger displays. By "larger displays", I'm referring to the actual size of the display too, not just the resolution. On my 15" laptop and my 23" desktop (both having the same resolution of 1920x1080), I would like the displays to be different. Having such a wide menu on a 23" display doesn't look good as there are wide empty parts. I'm currently using a
订阅 media-queries