Responsive
WEB Design
Powered by : Blactus Technologies
Responsive Design
Powered by : Blactus Technologies
WEB !
Responsive Design
Powered by : Blactus Technologies
Front-end
Back-end
Responsive Design
Powered by : Blactus Technologies
Front-end :
Responsive Design
Powered by : Blactus Technologies
Back-end :
Responsive Design
Powered by : Blactus Technologies
Responsive !
Responsive Design
Powered by : Blactus Technologies
" Content is like water "
Responsive Design
Powered by : Blactus Technologies
Responsive Design
Powered by : Blactus Technologies
Scales
Responsive Design
Powered by : Blactus Technologies
<img src="img.jpg" style="width:500px;"><img src="img.jpg" style="width:100%;">Fixed size :
Responsive :
Responsive Design
Powered by : Blactus Technologies
Break points
Responsive Design
Powered by : Blactus Technologies
What's a breakpoint?
Breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user.
Responsive Design
Powered by : Blactus Technologies
Based on
Device
Content
// iPhone 6, 6S, 7 and 8
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
@media only screen (min-width: 768px){
...
}
@media only screen
and (min-width: 768px)
and (max-width: 959px){
...
}Responsive Design
Powered by : Blactus Technologies
Media Queries
Responsive Design
Powered by : Blactus Technologies
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>Responsive Design
Powered by : Blactus Technologies
Libraries
Responsive Design
Powered by : Blactus Technologies
Responsive Design
Powered by : Blactus Technologies
BOOTSTRAP
Responsive Design
Powered by : Blactus Technologies
Responsive Design
Powered by : Blactus Technologies
Containers
Responsive Design
Powered by : Blactus Technologies
Responsive Design
Powered by : Blactus Technologies
GRID
Responsive Design
Powered by : Blactus Technologies
Responsive Design
Powered by : Blactus Technologies
Components
Responsive Design
Powered by : Blactus Technologies
Responsive Design
Powered by : Blactus Technologies
Thanks
Questions !
Contact me :
- Facebook: Cédric so
- Instragram: cedric.so_
Blactus Technologies :
- Facebook: blactus.tech
- Instragram: blactus_tech