Top Banner

Click here to load reader

Responsive design

Nov 27, 2014

ReportDownload

Technology

 

  • 1. Responsive Designtomoyuki kashiro (@Tkashiro)

2. Liquid DesignResponsive Design 3. Liquid DesignWeb( % , em )TOP 4. 5. - - TV 6. UILiquid Design 7. Responsive DesignUILiquid DesignFluid ImageMedia QueryResponsive Type Setting 8. Liquid Design(%)--- CSS ---#main {width : 100% ;padding : 10% ;margin : 10% ;} 9. Fluid Image-- CSS ---#mainImage {max-width : 30% ;max-height : 30% ;}IEmax-*widthheight 10. Media QueryCSS3--- CSS [email protected] screen and (max-width : 640px) {#main {widht : 300px ;}} 11. Responsive Type Settings--- CSS [email protected] screen and (max-width : 480px) {#main {font-size : 14px ;}} 12. - Kings Hill Car -http://www.kingshillcars.com/http://mediaqueri.es/ 13. UIUI1Responsive Design

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.