Question

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

任何人都可以帮助我如何在data-width中为不同的视图设置不同的值。

Answer 1

以下是您可以执行的操作示例：

b6eea9446d

也不要忘记使用：

<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>

在您的页面中

，以便在具有高音调的设备上适当缩放内容。

我选择了这个解决方案，因为它设置简单，易于理解。在我看来，也应该可以使用javascript来初始化数据，但这有点棘手。

为Linkedin公司简介插件

1 个答案: