I am trying to use separate media queries for Desktop / Normal tablets / Retina based tablets.
I have one set of visual design & icons for desktop, another set for tablets.
What is the best possible way to write a less mixin so that i can give one set of icons to desktop, another set to normal tablets and the 2X ones to retina based ones?
Right now, i am trying using the following snippet, but this one cant handle the normal tablet query. The less than, greater than symbol cant be used in media queries, else it would have been easy to write one mixin for device-pixel-ratio: 2 and another for device-pixel-ratio < 2 .
I tried with min-device-pixel-ratio:1 , but then, that gets applied to the desktop as well.
I need a query which can uniquely identify the normal tablets excluding the retina ones & desktop.
Is it correct to write like this for normal tablets? Putting a breakpoint just under 2 so that 2 and above will take the retina based query and 1.9 and below takes the normal tablet. But then, this query is applicable to desktops as well?
#media
only screen and (-webkit-max-device-pixel-ratio: 1.9),
only screen and ( max--moz-device-pixel-ratio: 1.9),
only screen and ( -o-max-device-pixel-ratio: 1.9),
only screen and ( max-device-pixel-ratio: 1.9),
{
Query that i have now.
.retina-image(#file-1x, #file-2x, #width-1x, #height-1x) {
background-image:~"url('#{imgPath}/#{file-1x}')";
width:#width-1x;
height: #height-1x;
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx)
{
background-image:~"url('#{imgPath}/#{file-2x}')";
background-size: #width-1x, #height-1x;
}
}
Any pointers will be of great help!
TIA
Related
I'm working on an application that's running on an embedded device with a touch LCD screen. For development setup, I have setup a Xephyr window with the matchbox WM at the same resolution (1280x800).
I have deloped a customer dropdown menu that will expand down wards and show select buttons, on my dev system this looks 9as designed) something like this:
Where on the end device, the button fills the whole window as can be seen here:
The functionality seems there but even though fix pixel sizes are used for the button size, it seems to take up the space of the whole window. They "drop-down" buttons are created from a list like:
btn_size = QtCore.QSize(206,57)
for n in btnlist:
_name = str(n)
self.drpbtns.append(QtGui.QPushButton(_name))
self.drpbtns[i].clicked.connect(lambda checked, v=_name: func(v))
self.drpbtns[i].resize(btn_size)
self.drpbtns[i].move(x,y+(i*(self.drpbtns[i].height()-1)))
self.drpbtns[i].setStyleSheet('background-color: rgb(255,255,255); \
border: 1px solid rgb(216,216,216); \
color: rgb(92,92,92); \
font: bold 22pt "Avenir"')
self.drpbtns[i].setFlat(True)
i = i+1
Why would the buttons not respect the QSize() as assigned?
I have started a new thread in the Qt Forum at and will make sure that replies are cross populated between the two threads!
And turns out, I have found the solution to my problem here: https://forum.qt.io/topic/78752/how-to-place-widgets-by-specifying-positions-in-qframe
I changed my QPushButton line to include the parent which resolved the issue: self.drpbtns.append(QtGui.QPushButton(_name,self.parent))
<div class="col-sm-6 col-md-4">
The above bootstrap element has 2 columns(col-sm-6 & col-md-4) within its element.
What does that mean?
Each bootstrap element can have another row and columns in it. For example if your element is 100px wide and you have 4 and 6 columns then you get 40px and 60px, minus padding of course.
See Two columns with two nested columns on https://getbootstrap.com/examples/grid/
The .col-md- prefix takes effect on medium devices (≥992px)
The .col-sm- prefix takes effect on small devices (≥768px)
You can read more about this on http://getbootstrap.com/css/#grid-options
Using both classes at the same time will let you achieve different behavior depending on the the device/resolution of the user.
For example, with the same markup and no additional CSS, you may achieve three columns side by side on bigger resolutions and 2 columns side by side and one beneath them on smaller resolutions
You can view and play around with this example on codepen: http://codepen.io/rebagliatte/pen/GNKvOB
col-xs-* ---> Extra small devices (phones, up to 480px)
col-sm-* ---> Small devices (tablets, 768px and up)
col-md-* ---> Medium devices (desktops, 992px and up)
col-lg-* ---> Large devices (large desktops, 1200px and up)
Each class above kicks in depending on the screen size.
So in your case col-sm-6 & col-md-4 .
Your container takes up 6 columns for small devices and 4 columns for medium devices and up.
Let's say if the screen size goes to extra small devices since we dont have anything specified by default it takes up full width available that being 12 columns.
Hope this helps :)
The bootstrap 3 grid system targets 4 different screen resolutions, depending on their width:
Large / col-lg (>= 1200px width)
Medium / col-md (992px - 1199px)
Small / col-sm (768px - 991px)
Extra Small / col-xs (<768px)
I find that these resolutions do not represent the user group of my webapp. For example Medium and Small combined is used by less than 5 % of my user base (meaning less than 5 % of my users have a screen resolution width of 768px to 1199px).
I would rather target the following 4 different resolutions:
ExtraLarge (>= 1600px width)
Large (1200px - 1599px)
SmallMedium (600 - 1199px)
MobileSmall (<= 599px)
So I not only like to add an extra large set but also change / replace the medium, small and extra small one.
Has anybody run into similiar issues? I would love to use a grid generator where I input my custom grid widths and get out the CSS code.
You can customize pretty much every aspect of Bootstrap using the customization section of the official site.
http://getbootstrap.com/customize/#grid-system
That link takes you directly to the grid system items.
Enter your values, and download your custom version of Bootstrap. Even includes a JSON file with your settings so you can re-import them later and make adjustments.
This is for the Bootstrap 4 users, who are using SCSS and like to create their own grid system using bootstrap mixins and variables.
#import '../../../bower_components/bootstrap/scss/variables';
#import '../../../bower_components/bootstrap/scss/mixins';
// Create custom variables to supply it for bootstrap's mixins
$grid-gutter-width-10: 10px;
$grid-gutter-widths-10: (
xs: $grid-gutter-width-10,
sm: $grid-gutter-width-10,
md: $grid-gutter-width-10,
lg: $grid-gutter-width-10,
xl: $grid-gutter-width-10
);
.row-xs {
#include make-row($gutters: $grid-gutter-widths-10);
#include make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths-10, $breakpoints: $grid-breakpoints)
}
We are developing an application working on both ios6 and ios7
My problem is that, If I check my application in device there is a small white space equal to the size of the status bar at the bottom of the screen.
If I put a dummy status bar at the top of the screen it will make problem in ios6, Help me if you have any solution.
That is the common status bar issue while migrating application from IOS 6 to IOS 7 use this to get ride of the issue:
For more reference
https://stackoverflow.com/a/19025547/1545180
You need to set the delta value for all the controls followed by increasing the origin x to 20pix for all the controls.
Step 1: Increase origin y to 20 pixel (for all the controls in the .xib)
step 2 . And set delta y to - 20 for all the controls in Xib.
Step 3 . Finally change the view as version in interface builder.
If your adding the controls programmatically you need to handle the frames (increase the y position based on the version ) of the added controls like this
if([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0f)
{
[_programmaticallyAddedControl setFrame:CGRectMake(20, 36, 176, 428)];
}
else
{
[_programmaticallyAddedControl setFrame:CGRectMake:CGRectMake(20, 56, 176, 428)];
}
Using Rebol/View 2.7.7, I'm trying to create a card game based on Nick's Rebol tutorial at: http://re-bol.com/rebol.html#section-10.18. What I want to do though is read the cards from the binary file Nick created, discard some of the data, and use it to layout a tableau of cards, 4 rows of 3 columns, with the 2 center card locations not used.
Here's my code:
protect-system
random/seed now
do %cards.r ;--include the binary card data
the-tableau: [
size 320x480 backdrop 0.170.0
style tabstyle image 80x100 teal
style holdplace box 80x100 coal
across
at 30x20 tc1: tabstyle
tc2: tabstyle
tc3: tabstyle return
at 30x130 tc4: tabstyle
tc100: holdplace
tc5: tabstyle return
at 30x240 tc6: tabstyle
tc200: holdplace
tc7: tabstyle return
at 30x350 tc8: tabstyle
tc9: tabstyle
tc10: tabstyle
]
lc: copy []
lc: [tc1 tc2 tc3 tc4 tc5 tc6 tc7 tc8 tc9 tc10]
deck-cards: copy [] ; The deck holds all of the cards from the binary file
deck-cards-num: copy []
deck-cards-color: copy []
lay: layout the-tableau
foreach [card label num color pos] cards [
dimg: load to-binary decompress (card)
append deck-cards dimg ;feel movestyle
throw-away-label: label
append deck-cards-num num
append deck-cards-color color
throw-away-pos: pos
]
random-card: does [pick deck-cards random length? deck-cards]
foreach c lc [set-face get c deck-cards]
view lay
do-events
But this doesn't show the cards at all. I'm not even sure it's reading the correctly? Where is the problem?
Actually you didn't use the random-card function in your for loop at the end... :-)
foreach c lc [get c set-face get c random-card ]
You note that you are not sure if data was loaded correctly...
here is a simple way to find out... just print/probe the TYPE? of that data
dimg: load to-binary decompress (card)
probe type? dimg
In this case it will print out image! in the console... so yep... that's working. :-)
As an added little detail, I noticed you didn't compensate your random for the "back face" image in the card data (which is at its end), so the random-card function should be fixed like so:
random-card: does [pick deck-cards random (length? deck-cards) - 1] ; - 1 since we don't want the back face to be picked.
You only need 'do-events if the event loop is not started.
View/new does not start the event loop .. but View does
I'm not addressing your actual problem though :(
to make the do-events note clear, I added a little answer here so I can add some inline code....
here is an example where you'd want your do-events to be used.
view/new lay ; display the interface right now. (with no cards)
random-card: does [pick deck-cards random (length? deck-cards) - 1] ; - 1 since we don't want the back face to be picked.
; deal cards with a half second delay.
foreach c lc [f: get c set-face get c random-card wait 0.5]
do-events
here, any code you put after 'DO-EVENTS will be executed once all view windows have closed.
which can be things like tmp file cleanup, save on exit, "save changes" dialogs, etc.
additional note:
While building graphics code, its a good habit to place this at the very start of you application:
print " "
It will open up the console, and then any view windows will show up in front of it.
When ready to share, just comment the line and remove any print statements in your code.
this is useful for 3 things:
1) Its usually highly annoying when the console always pops-up over your application while its tracing (print/probe/etc) some stuff after your window opens.
2) This also has the more useful side-effect of showing you if your application quit correctly since the console will ALSO quit when all waits have terminated correctly.
In your original example, if you add the above print, then you'll see that the console never closes, so this means the application is still running with no more application windows listening to events.
3) It also has the advantage that you can terminate the graphic app directly by closing the console window. This effectively closes all windows and waits immediately and shortcuts any "on application quit" code you might have (code after do-events).