- How to Embed Iframes to HTML
- Posted on October 1, 2019 | Comments This is a n approach to embed iframes to your HTML using PHP
Posted on November 8, 2012 by Michael Rosario | Comments
If you decided to fore-go the use of a responsive framework/boilerplate. Here is a quick way to get you started. This approach might be more work, but it may be fruitful in terms of broadening your skills and understanding of responsive design/development - not to mention a more light-weight code in that you only use what you need.
First, using CSS, we can now add the following statements that specifically target browser size or display area:
/* CSS for all browser goes here */
@media only screen and (max-width: 900px) {
/* CSS for browser screen with 900px and below goes here */
}
@media only screen and (max-width: 600px) {
/* CSS for browser screen with 600px and below goes here */
}
So you can create multiple definitions of style… amazing! There’s also specific CSS code to target the size of the device screen:
@media only screen and (max-device-width: 480px) {
/* CSS goes here */
}
Here are other examples for iPad, iPhone, Android and detection of landscape/portrait modes:
@media only screen and (device-width: 768px) and (orientation: landscape) {
/* CSS rules for iPad in landscape orientation */
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Android, iPhone CSS rules here */
}
Using jQuery (Javascript) is another way. jQuery can detect the size of the window or specific elements in your screen. In my case, I have the following DIV element:
#SiteWrapper { width: 100%; max-width: 960px; margin: 0 auto; }
This encloses all content of my HTML and it resizes only when the browser screen is less than 960px.
For jQuery, we need to take into consideration of two things: (1) Page load and (2) User changing the size of the browser:
if($("#SiteWrapper").width()<960){
/* JQuery code here when page loads */
}
$(window).resize(function(){
/* Detect when user or the browser size changes */
if($("#SiteWrapper").width()<960){
/* When #SiteWrapper DIV is less than 960px */
}
if($("#SiteWrapper").width()<600){
/* When #SiteWrapper DIV is less than 600px */
}
So, now you know how to detect the size of the browser in jQuery. Now what? I use the following code:
$("#SiteWrapper").attr("class","iPad");
/* This replaces the class */
$("#SiteWrapper").addClass("iPad");
/* This add the class (for multiple classes) */
$("#SiteWrapper").css({'font-size':'10px','font-weight':'bold'});
/* Changing the CSS */
$("#SiteWrapper A").animate({'font-size':'20px'},1000);
/* Animating the elements via CSS */
I tend to use both jQuery and CSS when creating responsive sites. I hope that this post can get you started. I believe that this is the future of web development and It looks like I’ve got a lot of work to update all my sites to responsive UI.
comments powered by Disqus