在不同的计算机上保持相同的视图
是否可以在所有计算机上保持相同的视图？即使它们的大小不同？是否可以不使用媒体查询？
所以，在我最初创建这个＆＃39; site＆＃39;的计算机上，它看起来像这样（模拟版本）：
这是我如何看待它，我希望它在其他计算机上看起来一样。
在其他计算机上它们不同，视图空间/大小因计算机而异。 （如果没有像以前那样在计算机上看到它如何）：
HTML：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="Styling%20-%20Nav%20Bar/navBar.css">
<link rel="stylesheet" type="text/css" href="Styling_Home_Page/preview_section.css">
<link rel="stylesheet" type="text/css" href="Styling_Home_Page/sections_home.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300' rel='stylesheet' type='text/css'>
<script src="jQuery-Versions/jquery-2.1.4.min.js"></script>
<script src="Scripts-DropdownMenu/dropdownMenuEffect.js"></script>
<script src="Scripts-onClick/onclick.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery-slider1/css/responsive.css">
<link rel="stylesheet" type="text/css" href="jQuery-slider1/css/sangarSlider.css">
<link rel="stylesheet" type="text/css" href="jQuery-slider1/themes/default/default.css">
<script type="text/javascript" src="jQuery-slider1/js/jquery.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/jquery.velocity.min.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/imagesloaded.min.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarBaseClass.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarSetupLayout.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarSizeAndScale.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarShift.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarSetupBulletNav.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarSetupNavigation.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarSetupSwipeTouch.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarSetupTimer.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarBeforeAfter.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarLock.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarResponsiveClass.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarResetSlider.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarTextbox.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider/sangarVideo.js"></script>
<script type="text/javascript" src="jQuery-slider1/js/sangarSlider.js"></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('.mySlider').sangarSlider({
timer : true, // true or false to have the timer
width : 850, // slideshow width
height : 500, // slideshow height
fullWidth : true, // slider will scale to the container size
fullHeight : false, // slideshow height will resize to browser height
minHeight : 400, // slideshow min height
maxHeight : 500, // slideshow max height, set to '0' (zero) to make it unlimited
continousSliding : false, // only works for horizontal-slide and vertical-slide
jsOnly : false,
directionalNav : 'autohide',
themeClass : 'default'
});
})
</script>
</head>
<body>
<script>
<?php
//function to retrieve posts from facebook’s server
function loadFB($fbID){
$url = "http://graph.facebook.com/".$fbID."/feed?limit=3";
// Update by MC Vooges 11jun 2014: Access token is now required:
$url.= '&access_token=YOUR_TOKEN|YOUR_ACCESS_SECRET';// *
//load and setup CURL
$c = curl_init($url);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
//get data from facebook and decode JSON
$page = json_decode(curl_exec($c));
//close the connection
curl_close($c);
//return the data as an object
return $page->data;
}
/* Change These Values */
// Your Facebook ID
$fbid = "190506416472588";
// How many posts to show?
$fbLimit = 10;
// Your Timezone
date_default_timezone_set("America/Chicago");
/* Dont Change */
// Variable used to count how many we’ve loaded
$fbCount = 0;
// Call the function and get the posts from facebook
$myPosts = loadFB($fbid);
//loop through all the posts we got from facebook
foreach($myPosts as $dPost){
//only show posts that are posted by the page admin
if($dPost->from->id==$fbid){
//get the post date / time and convert to unix time
$dTime = strtotime($dPost->created_time);
//format the date / time into something human readable
//if you want it formatted differently look up the php date function
$myTime=date("M d Y h:ia",$dTime);
?>
<ul>
<li><?php echo($dPost->message) . $myTime; ?></li>
</ul>
<?php
//increment counter
$fbCount++;
//if we’ve outputted the number set above in fblimit we’re done
if($fbCount >= $fbLimit) break;
}
}
?>
</script>
<div id="navBar">
<div id="logo">
</div>
<div id="menu">
<div id="menuTitle_Container">
<a class="menuTitle" href="index.html">HOME</a>
<a class="menuTitle" href="sneakers.html">SNEAKERS</a>
<a class="menuTitle" href="clothing.html">ACESSORIES</a>
<a class="menuTitle" href="acessories.html">SUPPORT</a>
</div>
</div>
</div>
<div id="dropdownMenu">
<div id="dropdownMenu_SubmenuContainer">
<div class="submenu_Container">
<div class="submenu_menuContainer">
<p class="clotheCategory">SNEAKERS</p>
<a class="submenuTitle" href="#">TRAINING</a>
<a class="submenuTitle" href="#">SPORTSWEAR</a>
<a class="submenuTitle" href="#">JORDANS</a>
<a class="submenuTitle" href="#">RUNNING</a>
<a class="submenuTitle" href="#">OTHERS</a>
</div>
<div class="submenu_menuContainer">
<p class="clotheCategory">HOT RIGHT NOW</p>
<a class="submenuTitle" href="#">ADIDAS YEEZY BOOST</a>
<a class="submenuTitle" href="#">CHRISTIAN LOUBOUTIN</a>
<a class="submenuTitle" href="#">BALENCIAGA</a>
<a class="submenuTitle" href="#">CHANEL</a>
</div>
</div>
<div class="submenu_Container">
<div class="submenu_menuContainer">
<p class="clotheCategory">LEATHER GOODS </p>
<a class="submenuTitle" href="#">WALLETS</a>
<a class="submenuTitle" href="#">GLOVES</a>
<a class="submenuTitle" href="#">BELTS</a>
</div>
<div class="submenu_menuContainer">
<p class="clotheCategory">BAGS</p>
<a class="submenuTitle" href="#">LOUIS VUITTON</a>
<a class="submenuTitle" href="#">PRADA</a>
<a class="submenuTitle" href="#">HERMÉS</a>
<a class="submenuTitle" href="#">MARC JACOBS</a>
<a class="submenuTitle" href="#">OTHERS</a>
</div>
</div>
</div>
</div>
<div class='mySlider'>
<div class='sangar-content'>
<img src='http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature6.jpg' />
</div>
<div class='sangar-content'>
<img src='http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature6.jpg' />
</div>
<div class='sangar-content'>
<img src='http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature6.jpg' />
</div>
<div class='sangar-content'>
<img src='http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature6.jpg' />
</div>
<div class='sangar-content'>
<img src='http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature6.jpg' />
</div>
</div>
<div id="sections">
<div id="section_1_master_container">
<div id="section_1_container">
<div class="title_bar_container">
<p class="section_news_title">LATEST NEWS</p>
<a class="view_older_news" href="#">OLDER NEWS</a>
</div>
<div id="news_container">
<div class="item_container">
<div class="item_options_container">
<a class="options_icon"></a>
</div>
<div class="author_container">
<a class="author_image" ></a>
</div>
<div class="news_title">
<p class="title_text">Welcome</p>
</div>
<div class="news_content">
<p class="content_text">
Hello, and welcome. We are proud to welcome you to this site. We hope you like it. This is my first company whatsoever, so i ope you like it. We have features like: Auctioning, selling (only applies for brand new items), trading and requesting. We hope you like these features, i assure you: We will keep updating with more features and important Do you need any help? Did you find a bug? Head over to the support, and let us know!</p>
</div>
<div class="tags_readmore_container">
<div class="tags_container">
<a class="tag">Welcome</a>
<a class="tag">Hello</a>
<a class="tag">Release</a>
</div>
<div class="readmore_container" href="#">
<a class="readmore_text">Read more<a class="readmore_icon"></a></a> </div>
</div>
<div class="published_date_container">
<p class="published_date">Published - 1/1/2016</p>
</div>
</div>
<div class="item_container">
<div class="item_options_container">
<a class="options_icon"></a>
</div>
<div class="author_container">
<a class="author_image" ></a>
</div>
<div class="news_title">
<p class="title_text">Welcome</p>
</div>
<div class="news_content">
<p class="content_text">
Hello, and welcome. We are proud to welcome you to this site. We hope you like it. This is my first company whatsoever, so i ope you like it. We have features like: Auctioning, selling (only applies for brand new items), trading and requesting. We hope you like these features, i assure you: We will keep updating with more features and important Do you need any help? Did you find a bug? Head over to the support, and let us know!</p>
</div>
<div class="tags_readmore_container">
<div class="tags_container">
<a class="tag">Welcome</a>
<a class="tag">Hello</a>
<a class="tag">Release</a>
</div>
<div class="readmore_container" href="#">
<a class="readmore_text">Read more<a class="readmore_icon"></a></a> </div>
</div>
<div class="published_date_container">
<p class="published_date">Published - 1/1/2016</p>
</div>
</div>
<div class="item_container">
<div class="item_options_container">
<a class="options_icon"></a>
</div>
<div class="author_container">
<a class="author_image" ></a>
</div>
<div class="news_title">
<p class="title_text">Welcome</p>
</div>
<div class="news_content">
<p class="content_text">
Hello, and welcome. We are proud to welcome you to this site. We hope you like it. This is my first company whatsoever, so i ope you like it. We have features like: Auctioning, selling (only applies for brand new items), trading and requesting. We hope you like these features, i assure you: We will keep updating with more features and important Do you need any help? Did you find a bug? Head over to the support, and let us know!</p>
</div>
<div class="tags_readmore_container">
<div class="tags_container">
<a class="tag">Welcome</a>
<a class="tag">Hello</a>
<a class="tag">Release</a>
</div>
<div class="readmore_container" href="#">
<a class="readmore_text">Read more<a class="readmore_icon"></a></a> </div>
</div>
<div class="published_date_container">
<p class="published_date">Published - 1/1/2016</p>
</div>
</div>
<div class="item_container">
<div class="item_options_container">
<a class="options_icon"></a>
</div>
<div class="author_container">
<a class="author_image" ></a>
</div>
<div class="news_title">
<p class="title_text">Welcome</p>
</div>
<div class="news_content">
<p class="content_text">
Hello, and welcome. We are proud to welcome you to this site. We hope you like it. This is my first company whatsoever, so i ope you like it. We have features like: Auctioning, selling (only applies for brand new items), trading and requesting. We hope you like these features, i assure you: We will keep updating with more features and important Do you need any help? Did you find a bug? Head over to the support, and let us know!</p>
</div>
<div class="tags_readmore_container">
<div class="tags_container">
<a class="tag">Welcome</a>
<a class="tag">Hello</a>
<a class="tag">Release</a>
</div>
<div class="readmore_container" href="#">
<a class="readmore_text">Read more<a class="readmore_icon"></a></a> </div>
</div>
<div class="published_date_container">
<p class="published_date">Published - 1/1/2016</p>
</div>
</div>
</div>
</div>
<a class="arrow-down"></a>
</div>
<div id="section_2_container">
<div id="section_2_title_container">
<p class="social_title">LATEST MEDIA</p>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS 1：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
margin: 0;
/* background-color: #7F8C8D; */
}
/* MENU */
#navBar {
background-color: #464646;
height: 65px;
width: 100%;
display: -webkit-box;
}
#logo {
width: 15%;
margin-left: 2.5%;
margin-right: 2.5%;
height: 65px;
}
#menu {
height: 65px;
width: auto;
}
#menuTitle_Container{
width: auto;
display: -webkit-inline-box;
}
.menuTitle{
font-family: 'Raleway', sans-serif;
font-weight: 400;
font-size: 17px;
padding-right: 10px;
padding-left: 10px;
color: #fff;
vertical-align: text-top;
line-height: 65px;
text-decoration: none;
display: -webkit-block;
display: block;
transition: color 0.4s ease;
transition: background-color 0.4s ease;
}
.menuTitle:nth-child(+n+2):hover, .menuTitle.active {
background-color: #fff;
transition: background-color 0.4s ease, color 0.4s ease;
color: #353535;
}
/* DROPDOWN MENU ON HOVER */
#dropdownMenu {
width: 750px;
height: 250px;
background-color: #fff;
margin-left: 20%;
display: none;
opacity: 0;
position: absolute;
z-index: 1000;
}
#mensmenu {
height: 100;
}
.submenu_Container {
width: 100%;
margin: 0 auto;
display: none;
}
.submenu_menuContainer {
width: 50%;
height: 190px;
display: inline-block;
margin-top: 30px;
margin-left: 5%;
}
.submenu_menuContainer:nth-child(1) {
border-right: 1px solid #B3B3B3;
}
.clotheCategory {
font-family: 'open sans', sans-serif;
font-size: 15px;
color: #353535;
font-weight: 600;
margin-top: 10px;
text-align: center;
}
.submenuTitle {
font-family: 'open sans', sans-serif;
font-size: 14px;
font-weight: 400;
color: #353535;
margin-top: 10px;
display: table;
}
CSS 2：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
#sections {
height: 100%;
width: 100%;
position: absolute;
}
#section_1_master_container {
height: 39%;
width: 90%;
margin: 0 auto;
}
/* NEWS */
#section_1_container {
height: 39%;
width: 100%;
}
.title_bar_container {
text-align: right;
}
.section_news_title {
font-family: 'Roboto', sans-serif;
font-size: 25px;
font-weight: 500;
color: #000;
text-align: center;
height: 5%;
margin-bottom: 0;
margin-top: 1%;
padding-bottom: 6px;
}
.view_older_news{
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
font-weight: 600;
color: #656565;
text-decoration: none;
display: inline-block;
transition: color 0.4s ease;
}
.view_older_news:hover {
color: #3498DB;
transition: color 0.4s ease;
}
#news_container {
height: 34%;
width: 100%;
}
.item_container {
height: 285px;
width: 350px;
background-color: #FFF;
display: inline-table;
margin-left: 35px;
margin-top: 10px;
margin-right: 35px;
border: 1px solid #D6D5D5;
}
.item_options_container {
height: 20px;
width: 20px;
margin-right: 5px;
float: right;
}
.options_icon{
background-image: url(sprites/Ellipsis_64.png);
background-size: 20px;
height: 20px;
width: 20px;
position: absolute;
opacity: 0.8;
cursor: pointer;
transition: opacity 0.4s ease;
}
.options_icon:hover {
opacity: 1;
transition: opacity 0.4s ease;
}
.author_container {
height:35px;
width: auto;
position: absolute;
margin-top: 10px;
margin-left: 10px;
display: -webkit-box;
position: absolute;
}
.author_image {
background-image: url(images/11205160_460606354116178_4059863531143056611_n.jpg);
background-size: 35px;
height: 35px;
width: 35px;
border-radius: 17.5px;
-webkit-border-radius: 17.5px;
-moz-border-radius: 175px;
opacity: 0.6;
transition: opacity 0.4s ease;
cursor:pointer;
position: absolute;
}
.author_image:hover {
opacity: 1;
transition: opacity 0.4s ease;
}
.news_title {
width: 200px;
height: auto;
line-height: 55px;
margin-left: auto;
margin-right: auto;
}
.title_text {
font-family: 'PT Sans', sans-serif;
font-size: 19px;
font-weight: 700;
color: #000;
text-align: center;
margin: 0;
}
.news_content {
height: 160px;
width: 290px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
.content_text{
font-family: 'PT Sans', sans-serif;
font-size: 14px;
color: #4C4C4C;
overflow: hidden;
margin: 0;
height: 160px;
width: 290px;
}
.tags_readmore_container {
width: 100%;
height: 35px;
display: -webkit-inline-box;
}
.tags_container {
width: 160px;
height: 35px;
display: block;
margin-left: 31px;
margin-top: 2px;
}
.tag {
height: 12x;
width: auto;
padding-left: 4px;
padding-right: 4px;
background-color: #616161;
line-height: 12px;
font-family: 'PT Sans', sans-serif;
font-size: 10px;
color: #EFEFEF;
}
.readmore_container {
width: auto;
height: 20px;
margin-top: 4px;
margin-left: 40px;
text-decoration: none;
opacity: 0.8;
cursor: pointer;
transition: opacity 0.4s ease;
}
.readmore_container:hover{
opacity: 1;
transition: opacity 0.4s ease;
}
.readmore_text {
line-height: 20px;
font-family: 'PT Sans', sans-serif;
font-size: 12px;
color: #303030;
text-decoration: none;
}
.readmore_icon{
background-image: url(sprites/Right_straight_arrow_64.png);
background-size: 12px;
height: 12px;
width: 12px;
position: absolute;
margin-left: 5px;
vertical-align: bottom;
margin-top: 5px;
}
.published_date_container {
height: 12px;
width: 100px;
margin: 0 auto;
}
.published_date {
font-family: 'PT Sans' sans-serif;
font-size: 10px;
color: #C3C3C3;
text-align: center;
}
/* SOCIAL */
#section_2_container{
width: 100%;
height: 67%;
margin-top: 30px;
}
#section_2_title_container {
width: 140px;
height: 100%;
margin-left: 5%;
border-right: 1px solid #BDC3C7;
}
.social_title {
font-family: 'Roboto', sans-serif;
font-size: 25px;
font-weight: 500;
color: #000;
text-align: center;
margin-top: 40px;
margin-bottom: 0;
text-align: -webkit-right;
margin-right: 20px;
display: inline-block;
}
/* FOOTER */
#footer {
height: 30%;
width: 100%;
background-color: #4C4C4C;
margin-top:30px;
}
1 个答案:
答案 0 :(得分：0)
欢迎来到SO。您对jquery插件的调用包含滑块的高度和宽度作为固定像素大小。更改为百分比或使用200em样式大小调整将允许浏览器自动缩放。这毕竟被描述为响应虽然演示并不完美（高度调整但不会从中减去菜单高度，因此它会在屏幕上稍微偏离但不被动，在1200x800分辨率下测试片剂）。
你的身高在这里设定：
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('.mySlider').sangarSlider({
timer : true, // true or false to have the timer
width : 850, // slideshow width
height : 500, // slideshow height
fullWidth : true, // slider will scale to the container size
fullHeight : false, // slideshow height will resize to browser height
minHeight : 400, // slideshow min height
maxHeight : 500, // slideshow max height, set to '0' (zero) to make it unlimited
continousSliding : false, // only works for horizontal-slide and vertical-slide
jsOnly : false,
directionalNav : 'autohide',
themeClass : 'default'
});
})
</script>
请注意width:800（但可能会被fullWidth: true覆盖 - 但是您height:500没有使用fullHeight行以及minHeight:400。
github文件将滑块描述为响应 - 在执行任何其他操作之前check all the parameters for the plug-in并在调用时添加scaleImage: true - 但responsive.css为空。
查看.js但建议将百分比高度传入您的插件调用（此回复顶部的代码）应该有效，例如height:60%
修改：此答案引用[dist]（https://github.com/tonjoo/jQuery-Sangar-Slider/tree/master/dist/css）文件夹中的css，该文件夹使用image标记和img类，即css中的image.img不会以像素显示固定。
响应式carousel demo有效。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？