Responsive web-design is latest technology that is been introduced in today's web-designing world. Its a revolutionary step of technology. If has removed a lot of problem of traditional web-design. in traditional web-design we have to work or code sepratelly for different devices.
e.g: our website is supported by desktop pc's but when we come to the tablets it's not fully supported and also on mobile there will be the same website. So for making your website platform independent either you have to code different for different platform or you can use responsive design for the website.
If you are a developer when you will code in the browser and will use any tool to see the code like inspect element in chrome then you can see the details of the website design but if the website is responsive then chrome or any other browser tools will not work properly.
Responsive Inspector:
Responsive Inspector is a tool for this kind of work it will easily help the developers to find and understand the responsive design. Because responsive design is cross platform like with one code you can set website for mobile , tablet and pc's environment.
with its release Firefox 15, Firefox have already introduced a tool that will help you work with responsive design and now Responsive inspector is directly rival of that tool. And also available for Chrome as and extension.So this tool will show the responsive website code and will also shows the all screen sizes for which this website is made for and also you can change between these layout. You also got an camera option to capture the photo if you want to.
SEE ALSO:How To Transfer Your Voice into Digital Text Using Speech Recognition Chrome Extension
SEE ALSO:How To Transfer Your Voice into Digital Text Using Speech Recognition Chrome Extension
After installing this extension you will get a square icon just next to URL bar and when you will click on that icon you will see the effect of the plugin and will see the available widths for the website. it will show you all the screens for which this website is made for and there it will be of the form of bars. Screen size will be written on the end of the bars and pixels value will be shown on the top. and these is also a camera option shown. when you will click on this camera option a image of the screen will be captured and will be save to the local system drive.
to view the css that is been used to code that responsive layout. you have to hover on one of the bars and then you will see {} icon on the bar. by clicking on that icon you will see your css code in the new tab option but the css is not editable so you can't directly edit the code but you can copy and use it for making other pages. So here it makes your work easier to understand the responsive design code.
No comments:
Post a Comment
Any Query, Suggestion Please Comment Here