rafalbromirski / sass-mediaqueries Goto Github PK
View Code? Open in Web Editor NEWMedia Queries mixins for Sass - fully customizable and very easy to use.
Home Page: http://rafalbromirski.github.com/sass-mediaqueries/
Media Queries mixins for Sass - fully customizable and very easy to use.
Home Page: http://rafalbromirski.github.com/sass-mediaqueries/
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?
Why not use https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L223-L228 for targeting HiDPI devices in general?
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,
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?
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?
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 )
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.
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.)
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...
** 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.. 👍
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;
}
}
}
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?
@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;
}
}
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
add new mixins for iPhone 5
Why you call it sass-mediaqueries? But actually it is SCSS not SASS
Could you please publish it to npm too?
I could submit a pull request with the package.json
file.
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?
I can say specifics for ipad and iphones, but I would love to just target "tablet" or "mobiles".
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.
To easy use in Rails app, we need gem for Assets Pipeline. Like in Compass Ceaser.
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] } }
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.
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
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.
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.
Update readme and create new gh-page
Or is there an easy sass way to do it?
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.
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
Hi, is it possible to set the width for 4k to 3840px to include native 4k tv resolution?
There is a missing opening bracket on the first line:
@mixin max-screen($max)
@include mq($max-width: $max) {
@content;
}
}
No units means that you will be able to use both em
or px
in one file. It's impossible right now.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.