search

marvelapp / devices.css

Pure CSS phones and tablets
MIT License
3.95k stars 611 forks source link

Responsive devices ? #21

Open roszpun opened 9 years ago

roszpun commented 9 years ago

Is here any way to make devices responsive ? Something like images with css : width:100%; height:auto; ?

dougwells commented 8 years ago

I was able to center the phone horizontally & vertically by adding this code to my CSS file .marvel-device { margin: 0 auto; top: 50vh; margin-top: -410px; display: block; }

Romainpetit commented 8 years ago

The real issue is the device metrics, not positioning. Since the whole project was created using a lot of px values, the simplest way is to use the css zoom property.

.marvel-device {
    zoom: 0.8
}

to be used in media queries !

joshkpeterson commented 8 years ago

It would be ideal if the entire device and everything in it was able to scale linearly according to vh or %.

Also, it's worth nothing that zoom is not supported in firefox at all.

This would be a great thing to do if someone wanted to contribute to the project. Non responsive devices is a dealbreaker for me, can't use this library.

rickyruiz commented 8 years ago

To achieve this you can use the css selector transform with scale property and media queries. DEMO

evansanto commented 6 years ago

Hi everyone, brand new to Github (and relatively new to coding in general) - just want to let you know that I found a bit of a workaround for this (totally unsure of browser compatibility etc!):

  1. Find & replace all "px" for "em" in the devices.min.css file.
  2. Place the html in a container that sets the 'font-size' to whatever you need (setting it at 1px will be equal to the current size - I used font-size:0.5px;).
  3. You can then adjust the font-size at different break points if required.

Hopefully that proves useful for someone! (I only used the iphone 8 code so unsure if it works with all devices but I don't see why not?) Cheers!

adriandmitroca commented 6 years ago

@evansanto

This is literally great idea, you won this issue Evan!

Using scale or zoom isn't really a solution as it mixes DOM measurements that are hard to handle.

rickyruiz commented 6 years ago

You're right @adriandmitroca , @evansanto totally nailed it, it should work with all the devices. Here's a demo. vw unit could also be used to avoid media queries.

kickbk commented 6 years ago

@evansanto very nice indeed!

osrec commented 6 years ago

Give https://github.com/osrec/ResponsiveDevices.css a try for totally responsive devices - they're not as detailed as the very realistic ones on here, but might be useful to someone :)

philipkiely commented 5 years ago

@evansanto be careful with this on chrome, you can run into issues with Chrome's minimum font size making the device huge

philipkiely commented 5 years ago

I wrote a different approach to this issue. My version modifies the scss directly, which you can then use to create the phones in any size you want. If you want to change between multiple sizes, use @media queries and load multiple files.

https://github.com/philipkiely/devices.css

Romainpetit commented 5 years ago

Nice endeavour @philipkiely, it looks like you nailed it.

alexkuc commented 2 years ago

Word of caution regarding zoom:

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

source: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom