You are currently reviewing an older revision of this page.
Go to current version

To make your page render smartly based on the resolution of the client desktop you might want to change CSS file with different style defined in it for different resolutions. Below is the sample java script code you can use for the same.

You can download the entire code sample from this link Sample - ASP.NET Dynamic CSS File Demo

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<head runat="server">
    <title>Dynamic CSS Demo</title>
        //based on resolution change css on load
        var a = window.screen;
        var styleNode = document.createElement('link');
        styleNode.setAttribute('rel', 'stylesheet');
        styleNode.setAttribute('type', 'text/css');
        if (a.width == "800" & a.height == "600")
            alert("Your system resolution is:800 * 600");
            styleNode.setAttribute('href', 'css/StyleSheet1.css');
        else if (a.width == "1024" & a.height == "768")
            alert("Your system resolution is: 1024*768");
            styleNode.setAttribute('href', 'css/StyleSheet2.css');
        else if (a.width == "1360" & a.height == "768")
            alert("Your system resolution is:1360*768");
            styleNode.setAttribute('href', 'css/StyleSheet3.css');
    <form id="form1" runat="server">
        <p class="TextColor">This is Dynamic CSS demo. CSS will change based on the resolution of client system.</p>
        Green - Resolution 800*600 <br />
        Red - Resolution 1024*768 <br />
        Blue - Resolution 1360*768
Revert to this revision