rafalbromirski / sass-mediaqueries Goto Github PK

Why not use https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L223-L228 for targeting HiDPI devices in general?

Why you call it sass-mediaqueries? But actually it is SCSS not SASS

Hello Everyone!

Today I've pushed new code! I've changed many things and added new mixins for iPhone5 and totally changed the approach.

Tomorrow I will write short note about it.

Cheers,
Rafal Bromirski

When I use:

@include iphone4(portrait) {
 .item-body {
    background: red;
  }
}

Together with Ripple & device called "iPhone 4/4S", the CSS doesn't change.
While, when querying:

@include min-screen(320px) {
  .item-body {
    background: red;
  }
}

It works, but I wanted to use iPhone rather than screen sizes ...
Are you familiar with this issue ? or is it just me ?

Just noting that I'm using Ionic framework as well ( incase it matters )

There is a missing opening bracket on the first line:

@mixin max-screen($max)
  @include mq($max-width: $max) {
    @content;
  }
}

To easy use in Rails app, we need gem for Assets Pipeline. Like in Compass Ceaser.

Hi, is it possible to set the width for 4k to 3840px to include native 4k tv resolution?

I would say 'Android' but that's way to broad. Getting Nexus 4/7/10 (and perhaps even Galaxy Nexus) would be awesome.

And even a generic 'phone' (targeting iPhones & Nexus 4 & Galaxy) and 'tablet' mixins which are aliases for the respective sizes would be interesting.

However, I expect that there is some overlap with the resolutions of the various iPhones & Nexus devices.

Of course iphone7 and iphone SE have the same screen size as iphone 6 and iphone 5, but maybe it can be more intuitive to have these mixins?

I can say specifics for ipad and iphones, but I would love to just target "tablet" or "mobiles".

add new mixins for iPhone 5

Hey,

Good work here - thanks

Any thoughts on extending these scripts for media types ala http://www.w3.org/TR/CSS2/media.html or have I missed something?

// all
// braille
// embossed
// handheld
// print
// projection
// screen
// speech
// tty
// tv

Kind thanks,

It would be nice to have a warning about which SASS version is needed for compilation.
I use gulp-sass, which uses node-sass, which uses libsass:

Libsass is written in C, and although it's quite fast, it's slow to implement new functionalities, like it's ruby-based counterpart.

I got the following error, after upgrading to 1.6 from 1.4, and I think it's caused by libsass' implementation:

{ [Error: expected '{' in media query]
  message: 'expected \'{\' in media query',
  fileName: './front_src/bower_components/sass-mediaqueries/_media-queries.scss',
  lineNumber: 29,
  showStack: false,
  showProperties: true,
  plugin: 'gulp-sass',
  __safety: { toString: [Function] } }

I get the following console warning:

Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi)

Is it better to use dppx instead of dpi?

I get this when importing via "@import "media-queries";
Syntax error: Invalid CSS after "...d ( min-width: ": expected expression (e.g. 1px, bold), was "$res-min ) and ..."
on line 57 of /Users/xx/Desktop/xxx/Web/CSS/media-queries.scss
from line 3 of /Users/xx/Desktop/xxx/CSS/main.scss

any ideas?

@mixin hdpi($ratio: 1.3) {
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
  only screen and (min-resolution: #{round($ratio*96)}dpi) {
    @content;
  }
}

i have a demo in jsbin 0.5px demo, and find the second keyword only must be removed.

@mixin hdpi($ratio: 1.3) {
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
  screen and (min-resolution: #{round($ratio*96)}dpi) {
    @content;
  }
}

There sure are a lot of public functions in this project. Would it be possible to create one or two wrappers for us which can be used to access the other functions?

Shouldn't this file start with an underscore so it doesn't get compiled?

For example: _media-queries.scss

That way folks can curl -O https://raw.github.com/paranoida/sass-mediaqueries/master/media-queries.scss to the location the need to store it in their project?

Hiya,
I've noticed that the code does not work correctly on landscape for the mac devices but portrait?

On the other hand, it would be good if you can declare the variables for the different devices you have created so I can use them around my sass.

Cheers,
jaume

I'd submit a pull request but I'm not sure what the proper naming should be. Or if anybody else would be interested in that.

Thoughts?

Have you planned to add support for iPhone 6 & 6 Plus?

I would ideally like to target iPhones in general or combine devices.

Any thoughts appreciated.

Maybe It's a important thing to implement on the code. A optional orientation param on the screen mixin. I have used this one in my personal website yesterday.

Ex:

@mixin screen($resMin, $resMax, $orientation : default)
{

  @if $orientation == default
  {
    @media screen and (min-width: $resMin) and (max-width: $resMax)
    {
      @content;
    }
  }
  @else
  {
    @media screen and (min-width: $resMin) and (max-width: $resMax) and (orientation:#{$orientation})
    {
      @content;
    }
  }

}

I got following error and get some stackoverflow question (http://stackoverflow.com/questions/21840776/popcorn-was-not-injected-in-your-file). please look for it and fix for this problem.

Running "serve" task

Running "clean:server" (clean) task
Cleaning .tmp...OK

Running "bowerInstall:app" (bowerInstall) task

sass-mediaqueries was not injected in your file.
Please go take a look in "app/bower_components/sass-mediaqueries" for the file you need, then manually include it in your file.

Running "bowerInstall:sass" (bowerInstall) task

sass-mediaqueries was not injected in your file.
Please go take a look in "app/bower_components/sass-mediaqueries" for the file you need, then manually include it in your file.

Looks like v1.6.0 is not compatible with libsass.
You can try here http://sassmeister.com/ - open control panel and you can easly jump between versions.

Console error:

assets/styles/common/_mixins.scss
  45:15  mixin mq has no parameter named $min-width
assets/styles/common/_mixins.scss
  45:15  mixin mq has no parameter named $min-width

https://www.dropbox.com/s/i6wyfyxdnhew1gm/Screenshot%202015-01-21%2015.53.15.png?dl=0

Same issue with iPhone5 in landscape:
https://www.dropbox.com/s/odcyhulygm9jgxp/Screenshot%202015-01-21%2015.54.13.png?dl=0

Is it working under devtools emulator? I can't test it under real device (I have iPhone 6).

Solution is to change $deviceAspectRatio in proper mixin when device is in landscape mode.

Or is there an easy sass way to do it?

Update readme and create new gh-page

Could you please publish it to npm too?

I could submit a pull request with the package.json file.

Would it be possible to add support for a single variable containing a comma-separated range, something like:

$small_display: 768px, 960px;

So that it could be used as follows:

@include screen($small_display) { }

(Forgive me if this is already possible and I just don't understand the syntax.)

No units means that you will be able to use both em or px in one file. It's impossible right now.

Will it be possible to add the Android's templates of: WVGA, FWVGA, HVGA etc .. ?
And their orientation just like your did for the iOS ?

I find it very difficult to implement them using your lib, because I need both width & height to nail a device.
Otherwise, the width of 480px will match X in portrait, but won't match 480px in landscape for template Y.

Thanks.

Any chance you could support for EM-based Media Queries?

Maybe a boolean and a default value on the root element could do the trick.

I know the HDTV Detection is still in beta, but I would like to assist if I can.. I would like to hear your input or others who use HDMI screens.. So maybe we can get this going right..

I would like to hear some feedback & input.. this would make an awesome detection utility..
The reason for such in-depth of resolution.. is because I am thinking about "Media-Queries" that could serve images based on exact resolution @2x, @3x, @4x.. and more.. not just images, but content too.

Here are some of my findings...

• Windows 7 x64 (Awesome) laptop w/ HDMI Out
• HP W2338H 23" Monitor (not TV) (& excellent picture by the way..)
• I use an HDMI Cable to connect them (Type 'A' Full size HDMI cable)

** This is what I see on your Demo page :

** This is what my Windows 7 settings are :

** This is just to show different options :

** This is interesting, so even tho I am using -- 1920 x 1080
..the browser window is less.. [1920 x 955]... Maybe you have to adjust for the little bit less, to correctly guess-timate it? a 125px's less...
[ source: https://useragent.openadmintools.com ]

I dont know what the pixels would be for the 720p (maybe 595px) if you subtract 125px to give room for browser.

Maybe you could add-on to it, add 480p and others.. what about "i" & "p".. ex. 480i or 480p

i found this list on Wikipedia -- [ source: https://en.wikipedia.org/wiki/Display_resolution ]

So in the end maybe it could detect:

Standard-definition television (SDTV) :
    480i
    576i

Enhanced-definition television (EDTV) :
    480p (720 × 480)
    576p (720 × 576)

High-definition television (HDTV) :
    720p (1,280 × 720)
    1080i (1,920 × 1,080 split into two interlaced fields of 540 lines)
    1080p (1,920 × 1,080 progressive scan)

Ultra-high-definition television (UHDTV) :
    2160p (3,840 × 2,160 - aka "4K UHD")
    4320p (7,680 × 4,320 - aka "8K FUHD")
    8640p (15,360 × 8,640 - aka "16K QUHD")

I also came across this too,
[source: http://www.javascriptkit.com/howto/newtech3.shtml ]

@Paranoida, Nice work.. 👍