magento 2 frontend and admin panel is not loading properly in xampp windows

Hello Friends.

I face issue that magento 2 fresh installation is not working properly in windows platform Xampp. Frontend display many css js files are missing and homepage is not loading properly. Same problem in backend also. 

Here its solution.

For Frontend :-

Go to this file : vendor\magento/framework\view\element\template\fileValidator.php

At around line 138 replace code with this one

$realPath = str_replace('\\', '/',$this->fileDriver->getRealPath($path));

 For Backend:-

Do these steps.

1. Go to ROOT > app > etc > di.xml and edit the di.xml file.
2. Modify it. Changing Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink To: Magento\Framework\App\View\Asset\MaterializationStrategy\Copy 

Now run these commands:

•  php -dmemory_limit=5G bin/magento setup:upgrade
•  php bin/magento setup:static-content:deploy -f
•  php bin/magento c:f 

Now check it. Problem is solved.

CSS Media Queries for All Devices and Browsers (Including IE7 and IE8)

Hello

Here I display all type of css media queries for all devices and browsers. Use either alone 1 or use both 2,3. Same as you have to use  portrait and landscape.

1:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
 

2: 

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
 

3: 

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 

4:

 /* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
} 

5: 

 /* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
} 

6: 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
} 

7:

 /* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
} 

8: 

 /* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 

9:

 /* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
} 

10: 

 /* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

11:

 /* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}