Fatal编程技术网
  • javascript/
  • Javascript 设置Linkedin公司档案插件的响应宽度

Javascript 设置Linkedin公司档案插件的响应宽度

javascript css responsive-design linkedin

Javascript 设置Linkedin公司档案插件的响应宽度,javascript,css,responsive-design,linkedin,Javascript,Css,Responsive Design,Linkedin,我想在我的响应网站中使用LinkedIn公司简介插件。我已经为桌面视图添加了data width=“300”，现在我想为平板电脑和移动设备设置一些不同的宽度值 有谁能帮助我如何在数据宽度中为不同的视图设置不同的值。以下是一个示例： <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g

我想在我的响应网站中使用LinkedIn公司简介插件。我已经为桌面视图添加了
data width=“300”
，现在我想为平板电脑和移动设备设置一些不同的宽度值

有谁能帮助我如何在
数据宽度
中为不同的视图设置不同的值。

以下是一个示例：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>test</title>
        <style>
            @media screen and (max-width:760px) {
                #linkedinXsSmall {display: block;}
                #linkedinSmall {display: none;} 
                #linkedinMedium {display: none;} 
                #linkedinDesktop {display: none;}  
            }

            @media screen and (min-width:761px) and (max-width:960px) {
                #linkedinXsSmall {display: none;}
                #linkedinSmall {display: block;} 
                #linkedinMedium {display: none;} 
                #linkedinDesktop {display: none;} 
            }

            @media screen and (min-width:961px) and (max-width:1280px) {
                #linkedinXsSmall {display: none;} 
                #linkedinSmall {display: none;} 
                #linkedinMedium {display: block;} 
                #linkedinDesktop {display: none;} 
            }
            /* apply to all larger devices */
            @media screen and (min-width:1281px) {
                #linkedinXsSmall {display: none;} 
                #linkedinSmall {display: none;} 
                #linkedinMedium {display: none;} 
                #linkedinDesktop {display: block;} 
            }
        </style>
    </head>
    <body>
        <script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>

        <div id="linkedinXsSmall">
            <script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="200px"></script>
        </div>

        <div id="linkedinSmall">
            <script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="400px"></script>
        </div>

        <div id="linkedinMedium">
            <script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="600px"></script>
        </div>

        <div id="linkedinDesktop">
            <script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="1000px"></script>
        </div>
    </body>
</html>


测试
@媒体屏幕和屏幕（最大宽度：760像素）{
#linkedinXsSmall{display:block；}
#linkedinSmall{显示：无；}
#LinkedIn媒体{显示：无；}
#LinkedIn桌面{显示：无；}
}
@媒体屏幕和（最小宽度：761px）和（最大宽度：960px）{
#linkedinXsSmall{显示：无；}
#linkedinSmall{display:block；}
#LinkedIn媒体{显示：无；}
#LinkedIn桌面{显示：无；}
}
@媒体屏幕和（最小宽度：961px）和（最大宽度：1280px）{
#linkedinXsSmall{显示：无；}
#linkedinSmall{显示：无；}
#linkedinMedium{display:block；}
#LinkedIn桌面{显示：无；}
}
/*适用于所有较大的设备*/
@媒体屏幕和屏幕（最小宽度：1281px）{
#linkedinXsSmall{显示：无；}
#linkedinSmall{显示：无；}
#LinkedIn媒体{显示：无；}
#LinkedIn桌面{display:block；}
}
另外，不要忘记使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
在您的页面中，以便在高音高的设备上适当缩放内容

我之所以选择这个解决方案，是因为它设置起来很快，也很容易理解。在我看来，也可以使用javascript来初始化数据，但这有点棘手。

您好，非常感谢您的及时回复，但是我不能使用上面的css，因为Linkedin公司简介插件只有2个JavaScript源，我们需要用数据宽度传递JavaScript源中的宽度值。请参阅：-[]我已经更新了我的答案，因为我知道您确切想要什么。如果这是你想要的，请随意将其标记为一个好答案。下次请立即提供更多详细信息，以便答案更准确。请添加一些代码，以获得更好的帮助；）。