如何使用javascript更改DOM元素，具体取决于客户端的屏幕大小

I am working on this event slider which has 3 posts with left, right scroll buttons. but i am new to responsive designs, and i want to change the whole content including all the elements in the DIV once the screen size reduces to 1000px. please help me with some ideas to go through.

我正在处理这个事件滑块,它有3个帖子,左,右滚动按钮。但我不熟悉响应式设计,并且我希望在屏幕尺寸减小到1000px后更改整个内容,包括DIV中的所有元素。请帮我一些想法。

4 个解决方案

#1

In your css use a media query with a max-width of 1000px. Inside the media query apply some css that will only come into effect on devices that are <= 1000px.

在您的CSS中使用最大宽度为1000px的媒体查询。在媒体查询内部应用一些仅在<= 1000px的设备上生效的css。

@media(max-width:1000px){
 /* So  in here you might want to apply some css to stack your posts one after the other and to hide your left and right scroll buttons*/
}

#2

Use the CSS media queries instead of using Javascript. Less code and more efficient

使用CSS媒体查询而不是使用Javascript。更少的代码和更高效

@media (min-width: 1001px) {
  #yourDiv {
     /*Add css property to your div when its 1001px or more*/
  }
}

 @media (max-width: 1000px) {
   #yourDiv {      
      /*Add css property to your div when its 1000px or less*/
   }
 }

Check this link for more examples: http://www.w3schools.com/css/css3_mediaqueries_ex.asp

有关更多示例,请查看此链接:http://www.w3schools.com/css/css3_mediaqueries_ex.asp

#3

You can define something like this in CSS

你可以在CSS中定义这样的东西

div {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

or you can use media for set font size in the CSS file

或者您可以在CSS文件中使用媒体设置字体大小

@media(max-width:767px) {
    body {
        font-size: 10px;
    };
}

@media(min-width:768px) {
    body {
        font-size: 11px;
    };
}

@media(min-width:992px) {
    body {
        font-size: 12px;
    };
}

@media(min-width:1200px) {
    body {
        font-size: 13px;
    };
}

Then set font-sizes on each and every elements you want to resize font while resizing browser or according to resolution in percentage.

然后在调整浏览器大小或根据百分比分辨率时,在要调整字体大小的每个元素上设置字体大小。

eg: if you want to resize fonts on h1

例如:如果要在h1上调整字体大小

h1 {
   font-size: 150%;
}

it will work as you want it to.

它会像你想要的那样工作。

EDIT: I think you need to resize te screen according to Desktop and Tablet and mobile if that it is then maybe this help--

编辑:我认为您需要根据桌面和平板电脑和移动设备调整屏幕大小,如果它可能是这样的帮助 -

Assuming this HTML:

假设这个HTML:

<div id="some_container">
    <nav id="n1">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
    <p>Some Text</p>
    <nav id="n2">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
</div>

You will only need the following CSS:

您只需要以下CSS:

#n1{
    display:none;
}

@media only screen 
and (max-width : 1000px) {
    #n1{
        display:block;
    }
    #n2{
        display:none;
    }
}

The great thing about this way is that it's very scaleable. Need this "effect" on a different page? You'll only have to edit [u]that[/u] page. No messing around with JavaScript, hard-coding new classes / cases.

这种方式的好处在于它非常可扩展。在不同的页面上需要这个“效果”吗?你只需要编辑[u]那个[/ u]页面。不要乱用JavaScript,硬编码新的类/案例。

#4

Have a look below example using css media queries, it may help you.

看看下面使用css媒体查询的例子,它可能会对你有所帮助。

<style>
	@media(min-width:1000px) {
	    .hide-on-desktop {
	        display:none;
	    };
	}

	@media(max-width:999px) and (min-width:767px) {
	    .hide-on-laptop {
	        display:none;
	    };
	}

	@media(max-width:766px) {
	    .hide-on-mobile {
	        display:none;
	    };
	}
</style>

<div class="hide-on-desktop hide-on-laptop"> for mobile </div>
<div class="hide-on-desktop hide-on-mobile"> for laptop </div>
<div class="hide-on-laptop hide-on-mobile"> for desktop </div>

#1