media-queries

media queries for iBooks

由 吃可爱长大的小学妹 提交于 2019-12-24 10:45:34
问题 I'm wonder is there media query for iBooks. I know there is for kindle but I cant find any for iBooks. Is media query for web (from this website will work on iBooks? thanks for any help. 回答1: yes, you can use web browser-style media queries for iBooks, although right now iBooks doesn't seem to support orientation : landscape or orientation : portrait . it's important that you include them as links in your HTML's head rather than directly in the stylesheet: <link type="text/css" rel=

Bootstrap Accordian - After icons

由 匆匆过客 提交于 2019-12-24 10:39:01
问题 I'm trying to get the "after" icons to display properly. When you first run the code, the icons point down instead of to the right. It isn't until you actually open and close a panel do they display properly. I'm getting the same effect with my code on a website I'm working on. Any ideas? Code example link 回答1: So the problem here is two things. 1.) You've got your icons transposed for their states, hence the starting pointing down. 2.) This is what causes number one, since the collapsed

How to get current css value defined by media query in javascript?

由 自古美人都是妖i 提交于 2019-12-24 09:39:44
问题 I am developing a site where I want to access a menu display property. If the menu is closed ( display: none ) then I want to open it, if it's open ( display: block ) then I want to close it. I define the menu as closed in responsive media query (if width is higher then menu is always visible with !important in media query), the rest I control in Javascript: var attach_menu_control = function() { var $sidebar = document.querySelector('.sidebar') var $sidebar_content = document.querySelector('

Safari media-queries print not using height 100% correctly

由 社会主义新天地 提交于 2019-12-24 09:30:01
问题 I'm using printing media queries for an app that is working fine on Chrome/Edge/Firefox but is failing on Safari. I'm using height 100% in order to make it fill the printing page, on safari it seems to be using the percentages as a percentage of the element itself. I have put simplified code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>print test</title> </head> <style> .big{ border:5px solid black; } @media print { .breaker{ page-break-before: always; } .big{

Microsoft Edge, media query doesn't work correctly

由 大兔子大兔子 提交于 2019-12-24 09:28:48
问题 I tested this media query successfully on Google Chrome but somehow Microsoft Edge has issues with it. Is something wrong with these queries? Or is it just a bug in Microsoft Edge? UPDATE: It looks like Edge needs a Class without Media Query, so I added .height-fix{height:650px} and it works. @media all and (min-width:875px) and (max-width:980px) { .height-fix { height : 610px; } } @media all and (min-width:768px) and (max-width:875px) { .height-fix { height : 575px; } } @media (max-height

How to set five column in row with Materialize Design?

由 …衆ロ難τιáo~ 提交于 2019-12-24 08:02:05
问题 I am using materialize design framework for responsive html page. We can easily manage 2, 3, 4 column in a row. But right now i want to show 5 column in a row. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> <div class="container"> <div class="row"> <div class="col l3"> <img src="https

media query not working as expected

由 不打扰是莪最后的温柔 提交于 2019-12-24 07:56:42
问题 why does this code make both divs appear on a landscape-oriented iPad? /* CSS */ div{ display:none; } @media screen and (min-width: 48em) { /* IPAD PORTRAIT */ body { /* DARK BLUE */ background-color:#006; } div{ display:none; } #ipad-portrait{ display:block; } } @media screen and (min-width: 64em) { /* IPAD LANDSCAPE */ body{ /*bright green*/ background-color:#3f0; } /* an attempt to hide all divs before displaying the one that says iPad landscape */ div{ display:none; } #ipad-landscape{

Css - how to stop image scalling with size cover?

由 最后都变了- 提交于 2019-12-24 07:51:02
问题 I'm creating simple media for screens over 2560px in width. My problem is that I have header and over 2600px I set static width to my header, when I resize window over 2600px header have 2600px width but image is resizing. How to set image size relative to header width, not to screen width?? #header { position: relative; height: 100vh; .background-image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: url('~/images/17.jpg'); background-size: cover;

Elements not aligning in Bootstrap

由 蓝咒 提交于 2019-12-24 07:33:17
问题 I would like for each icon to align with their respective heading. But this is what it looks like instead: CSS HTML : .section-service .bx h4 { text-transform: uppercase; color: #535355; } .section-service .bx span { font-size: 250%; float: left; width: 25%; } .section-service .bx h4, .section-service .bx p { float: right; width: 75%; } <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css

How to use media query for high resolution devices

由 五迷三道 提交于 2019-12-24 06:48:56
问题 I have made a simple website which is responsive (more or less). I have used media query @media only screen and (max-width: 699.99px) . Now I know that this will activate the css inside it when resolution is less than 699.99px. So it is fine with computer but it doesn't work in mobiles and I know why. But I don't really understand how to solve this. I want this query to work on computer screen (resizing) as well as mobile devices and tablets. 回答1: You can use em or rem instead of px . This
订阅 media-queries