javascript


Controlling Media Queries based on zoom of browser window


I was wondering if there was a way to detect the browser width. For example, if you hit ctrl + or ctrl - and the windows zooms, is there a way to style css based on that? Box is referring to a perfectly square box. So for 100% browser with I want a layout with 3 boxes and 50% I would like to style 6 boxes on the screen. Is this possible?
Example 100% browser width
box box box
Example 50% browser width
box box box box box box
That functionality is actually built into CSS media queries already. As a proof of concept, play with the magnification in your browser with this JSFiddle open.
At 50% magnification six boxes are visible, at 100%, there are only three. Note that this behavior will vary across devices.
Hope this helps!
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box five"></div>
body {
width: 100vw;
}
.box {
width: 50px;
height: 50px;
background: #555;
display: none;
}
#media only screen and (max-width:680px) {
.box {
display: inline-block;
}
}
#media only screen and (min-width:681px) {
.one, .two, .three {
display: inline-block;
}
}

Related Links

JQUERY change div contents based on select options — I'm lost
Chrome is greying out my extension
Submitting form data with php with no page reload?
CouchDB: conditionally changing a value in Map/Reduce output to a negative
Using Perl with ReactJS
How to distort just a specific frequency range using javascript web audio?
CSV Layer in ArcGIS Javascript API not rendering
D3.js working in Pycharm ide but not when i load it into github ,suggestions?
AngularJs route no error but not working
jQuery - map array parts to HTML
Getting Data Structures from PHP to JS, then proceed with GET
JavaScript variable in link
Pattern attribute for not accepting numbers
Random “google is not defined” error when creating marker google maps Api (js,c#)
Refactoring hapi configs with joi validation
V-for in Vue.js component not working

Categories

HOME
backbone.js
babeltrace
azure-ad-b2c
bundle
hashbang
zsh
stateless
3dsmax
glmnet
field
azure-keyvault
ng-bootstrap
red
uglifyjs
frames
telerik-open-access
google-custom-search
bmp
gitbook
flexslider
mininet
udf
max-flow
android-camera
transactional
relationship
mpandroidchart
ram
monetdb
predicate
sinopia
buddypress
silverlight-4.0
josso
pso
glassfish-3
capture
antlrworks
azure-cloud-services
alteryx
2d-games
presentation
pysnmp
postfix-notation
fabrication-gem
jcodec
android-vertical-seekbar
castor
perfmon
livecycle-designer
computercraft
mom
android-avd
mjpeg
dropnet
expansion
movabletype
mint
logtalk
nsdocument
mpmusicplayercontroller
indexoutofboundsexception
mean-square-error
unreal-development-kit
panels
grunt-angular-gettext
equations
adobe-native-extensions
readdirectorychangesw
ratchet-bootstrap
p4v
microsoft-bits
urlrequest
whiptail
httperf
boost-iostreams
telerik-combobox
volume-shadow-service
stringwriter
sqltransaction
bitmapsource
mobile-os
appearance
greendroid
managed
lexical
flashpaper
ajax.net
django-profiles
product-development

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App