media-queries

IE7, IE8 support for css3 media query [duplicate]

由 折月煮酒 提交于 2019-12-17 07:26:30
问题 This question already has answers here : IE8 support for CSS Media Query (11 answers) Closed 4 years ago . I have tried : @media screen and (max-width:1024px) { .sidebar{width:630px;} } to get the fix for IE7 and 8 but its not working, where as it works for IE9 and other browsers. Is there a different way of writing this. I have tried to include the css3mediaqueries js as well but no success. Is there any support at all for IE7 and IE8? 回答1: Include this meta tag in the <head>. <meta name=

How do I make a website responsive? [closed]

由 岁酱吖の 提交于 2019-12-17 06:19:43
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 2 years ago . I want to know how to make a website, and all of its elements responsive to adapt to different screen sizes: fonts, images etc... Do I have to do somethings like this: @media only screen and (max-width : 320px) { //here put the width and height of all the elements in the site }

CSS Media Query - Soft-keyboard breaks css orientation rules - alternative solution?

由 依然范特西╮ 提交于 2019-12-17 05:39:32
问题 I am working with multiple tablet devices - both Android and iOS . Currently I have following resolution variations for all the tablets. 1280 x 800 1280 x 768 1024 x 768 (iPad Obviously) - iPad does not have this issue Simplest way to apply device orientation based style is to use media query's orientation using following syntax. @media all and (orientation:portrait) { /* My portrait based CSS here */ } @media all and (orientation:landscape) { /* My landscape based CSS here */ } This works

CSS media queries for screen sizes

由 走远了吗. 提交于 2019-12-17 03:52:06
问题 I am currently trying to design a layout which will be compatible for multiple screen sizes. The screen sizes I am designing for are listed below: Screen Sizes: 640x480 800x600 1024x768 1280x1024 (and larger) The thing that I'm having trouble with is creating the css3 media queries, so that my layout changes when the window's width gets to one of these widths. Below is an example of the media queries I'm currently using, but it is not working for me, so I'm wondering if someone could help me

Media query works on mobile Firefox but doesn't work on mobile Chrome

由 倾然丶 夕夏残阳落幕 提交于 2019-12-14 03:42:50
问题 I'm facing the problem with media queries on mobile devices. I've got something like this: @media screen and (min-device-width : 320px) and (max-device-width : 480px){ /* Some styles*/ } I'm testing my website on Galaxy S6. In Firefox everything looks fine and styles do change but when i load the same website in Chrome - there's no change and it looks like the media query doesn't work. Does Chrome need some special queries? 回答1: Add this meta tag into the header of your HTML file: <meta name=

Firefox: How to test prefers-color-scheme?

由 十年热恋 提交于 2019-12-14 03:39:56
问题 In Firefox 67, one can use media queries to detect user preference on light or dark theme. In my version of Firefox (under Ubuntu), it seems that my preference is light theme. That is, the following CSS gives a blue background: @media (prefers-color-scheme: light) { :root {} body { background-color: blue; } } How can I change my Firefox preferences so that prefers-color-scheme: dark evaluates to true? I found an add-on that seems to do the trick, but I must be doing something wrong with my

Media Queries fix issue

由 不问归期 提交于 2019-12-13 22:27:25
问题 I made some simple media queries and load in website but when I refresh the page so because of media queries css website orignal css also disturbing, please suggest the exact and proper solution how I fix the media queries as per mobile widths and also including way of these queries in website so I can make a proper responsive website. For more suggestion I share css code /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 480px) body { background-color:white; }

Keeping my search bar viewable when my navbar collapses with twitter bootstrap

由 时光怂恿深爱的人放手 提交于 2019-12-13 21:18:12
问题 I have a nabvar that contains a search field 'navbarSearchQuery'. When the navbar collapses when the screen shrinks to a phone size I want 'navbarSearchQuery' to remain visible in the navbar. Is there something I can do with @media queries to keep it visible or do I have to move it outside the collapsable section in the navbar? <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed"

Ordering classes in bootstrap 3

由 好久不见. 提交于 2019-12-13 21:11:09
问题 I have simple container with one row which holds 6 elements (divs). I am struggling to reorder elements using media query. Here is what I have so far: @media (min-width: 320px) and (max-width: 480px) { .product2{ order: 3; } .products{ display: flex; flex-direction: column; } } <div class="row products"> <div class="col-sm-6 col-md-4 product1">product1</div> <div class="col-sm-6 col-md-4 product2">product2</div> <div class="col-sm-6 col-md-4 product3">product3</div> <div class="col-sm-6 col

Is there any way to write stylesheet specific to thermal printer?

由 一曲冷凌霜 提交于 2019-12-13 19:33:08
问题 I am using ASP.Net MVC. I have a view,which I need to print. If its Laser printer then using media queries, I can configure a print friendly version of my view. But how do I do the same for thermal printer. Is there any option, where we can write stylesheet specific to thermal printer? Or any other way to do the same? 来源： https://stackoverflow.com/questions/34774473/is-there-any-way-to-write-stylesheet-specific-to-thermal-printer
订阅 media-queries